vue中使用echarts
- 社区地址
- 安装
npm install echarts -S
- 按需引入
import * as echarts from 'echarts/lib/echarts'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/grid'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/dataZoom'
Vue.prototype.$echarts = echarts
- 初始化
this.echartsData.myChart = this.$echarts.init(this.$refs.versionedBox3Echarts);
this.echartsData.option = {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(55,55,55,0.8)',
formatter: (params) => {
var color = params.color;
var htmlStr = '<div style="color:#fff;">';
htmlStr += params.name+ '<br/>';
htmlStr += `<span style="background-color:${color};display: inline-block;width: 10px;height: 10px;border-radius: 50%;margin-right:10px"></span>`;
htmlStr += '用户' + ':' + params.value;
htmlStr += '</div>';
return htmlStr;
}
},
grid: {
bottom: 90
},
dataZoom: [{
type: 'inside'
}, {
type: 'slider',
height:18
}],
xAxis: {
data: this.echartsData.data.categoryData,
silent: false,
splitLine: {
show: false
},
splitArea: {
show: false
}
},
yAxis: {
splitArea: {
show: false
}
},
series: [{
barWidth:this.echartsData.barWidth,
type: this.echartsData.seriesType,
data: this.echartsData.data.valueData,
large: true
}]
}
this.echartsData.myChart.clear()
this.echartsData.myChart.setOption(this.echartsData.option);