foreword
Use Echarts to visualize charts in vue, the official website is as follows
1. Steps to use
1. Install the plugin
The code is as follows (example):
npm install echarts --save
2. Global references
//Introduce echarts globally, import * as echarts from 'echarts' in main.js
Vue.prototype.$echarts = echarts
<template>
<div id="chart" style="height: 400px" ref="chart"></div>
</template>
<script>
export default {
name: "CustomerRegionStatistics",
data(){
// echarts图表实例
chart: null
myTable:[]
return{
myTable:[],
}
},
created() {
this.initData();
},
// methods层负责定义方法
methods: {
//获取后台的数据
initData(){
this.$http.get(this.HOST+"/echarts/get").then(resp=>{
console.log(resp)
this.myTable=resp.data.data
console.log( this.myTable)
//设置表数据
this.initChart();
})
},
initChart () {
console.log( this.myTable)
// 初始化echarts
this.chart = this.$echarts.init(this.$refs.chart)
// 设置图表option(配置项)绘制图表
// 绘制图表
this.chart.setOption({
title: {
text: '客户地区统计',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: '地区',
type: 'pie',
radius: '50%',
data: this.myTable,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
})
},
},
//mounted：dom渲染完成，组件挂载完成 ，实现页面效果
mounted () {
this.initChart()
},
}
</script>
<style scoped>
</style>
Summarize
To be added