vue2 中使用 echarts

[stars-oceans]

<template>
    <div>
        <div ref="chart" class="box">
        </div> 
        <button @click="aa">11</button>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    props : ['data'],
    components: {
    },
    data() {
        return {
            myChart : null
        }
    },
    mounted() {
        this.myChart = echarts.init(this.$refs.chart);
            //图表的配置项和数据
            const trafficWay = [
                {
                    name: '岳麓区',
                    value: 30
                },
                {
                    name: '望城区',
                    value: 20
                },
                {
                    name: 'fff ',
                    value: 30
                },
                {
                    name: '45',
                    value: 20
                },
            ]
            var sum = trafficWay.reduce((prev, cur) => { return prev + cur.value * 1 }, 0);
            const data = []
            const color = ['#83F9F8', '#83F9F8', '#027AD0', '#027AD0']
            for (let i = 0; i < trafficWay.length; i++) {
                data.push(
                    {
                        value: trafficWay[i].value,
                        name: trafficWay[i].name,
                        itemStyle: {
                            normal: {
                                borderWidth: 15,
                                borderRadius: 400,
                                label: {
                                    show: true, //false不显示饼图上的标签
                                    position: 'outside', //inside（在饼图上显示）,outside(默认就会出现引导线) center
                                    formatter: '{b}:{c}',
                                },
                                //只有设置了label:show=ture;position=outside 设置labelLine才会有效
                                labelLine: {
                                    show: true, //显示引导线
                                    length: 500, //连接饼图第1段线条的长度 length length2 不写自适应
                                    length2: 300, //链接饼图第2段线条长度
                                    smooth: false, //是否光滑连接线
                                },
                            }
                        }
                    },
                    {
                        value: sum / 200,
                        name: '',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                },
                                color: 'rgba(0, 0, 0, 0)',
                                borderColor: 'rgba(0, 0, 0, 0)'
                            }
                        }
                    }
                )
            }
            let option = {
                color: color,
                backgroundColor: '#000',
                tooltip: {
                    show: false
                },
                series: [
                // 内圆
                {
                    name: '',
                    type: 'pie',
                    clockWise: false,
                    radius: ['130%', '150%'],
                    hoverAnimation: false,
                    center: ['50%', '50%'],
                    top: 'center',
                    itemStyle: {
                        normal: {
                            opacity: 1,
                            label: {
                                position: 'outside',
                                alignTo: 'edge',
                                margin: 1,
                                formatter: function (params) {

                                    if (params.name !== '') {
                                        return (
                                            '{b|' + params.name + '}\n{d|' + params.value + '} '
                                        );
                                    } else {
                                        return '';
                                    }
                                },
                                rich: {
                                    b: {
                                        fontSize: 14,
                                        color: 'rgba(255, 255, 255,.6)',
                                        align: 'left',
                                        padding: 4,
                                    },
                                    d: {
                                        fontSize: 22,
                                        color: 'rgba(0, 255, 253, 1)',
                                        align: 'left',
                                        marginTop: -100,
                                        padding: 4,
                                    },
                                },
                            },
                            labelLine: {
                                normal: {
                                    length: 10,
                                    length2: 5,
                                    lineStyle: {
                                        width: 1,
                                    },
                                },
                            },
                        },
                    },
                    data: data
                },
                {
                    name: '',
                    type: 'pie',
                    clockWise: false,
                    radius: ['70%', '110%'],
                    hoverAnimation: false,
                    center: ['50%', '50%'],
                    top: 'center',
                    itemStyle: {

                        normal: {
                            opacity: 0.6,
                            label: {
                                show: false
                            }
                        }
                    },
                    data: data
                },
            ]
            }
            //配置项和数据显示
        this.myChart.setOption(option, true);
            // myChart.dispose()
    },
    methods: {
              //初始化
        aa(){
            // 需要修改的值
           this.myChart.setOption( {
                backgroundColor: '#ccc',
                series : [{  radius: ['30%', '150%'],} ]
            });
        }
    },

}
</script>

<style scoped>
.box {
    width: 500px;
    height: 500px;
    background-color: pink;
}
</style>

[stars-oceans]

简单版本

<template>
  <div>
    <div ref="chart" class="box">
    </div>
    <button @click="aa">11</button>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  props: ['data'],
  components: {
  },
  data() {
    return {
      data: ['']
    }
  },
  mounted() {
    this.myChart = echarts.init(this.$refs.chart);
    //图表的配置项和数据
    let option = {
      xAxis: {
        type: 'category',
        data: this.data || ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }
      ]
    };
    //配置项和数据显示
    this.myChart.setOption(option, true);
  },
  methods: {

    //初始化
    aa() {
      // 需要修改的值
      this.myChart.setOption({
        backgroundColor: '#ccc',
        series: [{ radius: ['30%', '150%'], }],
        xAxis: {
          data: ['1', '2', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        series: [
          {
            data: [1, 2, 3],
          }
        ]
      });
    },

  },

}
</script>

<style scoped>
.box {
  width: 500px;
  height: 500px;
  background-color: pink;
}
</style>