效果图：

两个角色在四个不同属性下的对比：

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

祝各位成功