easy-echarts

一个简单的 echarts 使用插件，使用方法特别简单。

使用方法

文件里引入

1import { easyEcharts } from 'easy-echarts'

components 里注册

1components: { easyEcharts },

这里同样可以全局注册，在main.js里注册,注册以后就不需要在单独的文件引入注册

1import {easyEcharts}  from "easy-echarts"
2Vue.use(easyEcharts)

代码里，以饼图为例：

1<easy-echarts :isChange="isChange"
2              :isItemEchart="true"
3              :legendOption="legend"
4              :tooltipOption="tooltip"
5              :seriesOption="series"></easy-echarts>

data 里定义数据,这里的配置项和 echarts 里的配置项是对应的，这里以饼图为例：

1tooltip: {
2        trigger: 'item'
3},
4legend: {
5    top: '5%',
6    left: 'center'
7},
8series: [
9    {
10        name: 'Access From',
11        type: 'pie',
12        radius: ['40%', '70%'],
13        avoidLabelOverlap: false,
14        label: {
15        show: false,
16        position: 'center'
17        },
18        emphasis: {
19        label: {
20            show: true,
21            fontSize: '40',
22            fontWeight: 'bold'
23        }
24        },
25        labelLine: {
26        show: false
27        },
28        data: [
29        { value: 1048, name: 'Search Engine' },
30        { value: 735, name: 'Direct' },
31        { value: 580, name: 'Email' },
32        { value: 484, name: 'Union Ads' },
33        { value: 300, name: 'Video Ads' }
34        ]
35    }
36],
37isChange: true,//监听数据是否发生变化，然后重新渲染图表，这个每次echarts数据改变，修改isChange的布尔值就行。