vue中echarts两组柱状图对比，可切换折线图、文本图并导出
2019-12-22 本文已影响0人
顺小星
效果图：
两个角色在四个不同属性下的对比：
image.png
1、文本图：
image.png
2、折线图：
image.png
3、柱状图：
image.png
4、png图片导出：
image.png
代码：
HTML中：
image.png
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="echarts" style="width: 800px;height:400px;margin-top:30px"></div>
定义一个draw方法：
draw() {
var myChart = this.$echarts.init(document.getElementById('echarts'));
// 指定图表的配置项和数据
var option = {
title: {
text: '数据分析',
textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
fontSize: 14,
fontStyle: 'normal',
fontWeight: 'bold',
},
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['当前客户', '客户平均']
},
toolbox: {
show: true,
feature: {
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
xAxis: [{
type: 'category',
data: ['销售额（元）', '回款额（元）', '工作时间（小时）', '费率动态（元/小时）']
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '当前客户',
type: 'bar',
data: [78, 80, 87, 93],
color: '#CC0066'
},
{
name: '客户平均',
type: 'bar',
data: [90, 77, 62, 76],
color: '#009999'
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
在mounted中调用即可。
image.png
