基于 echarts 实现同心圆占比图 - vue

最新推荐文章于 2024-07-26 20:46:33 发布

奶油味的小布丁

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量370

点赞数

文章标签： echarts vue.js javascript

本文链接：https://blog.csdn.net/qq_52766402/article/details/130726240

版权

template：

<div class="echartOne" id="mychartOne" :style="{ float: 'left', width: '50%', height: '57%' }"></div>

js：

//npm 安装后引入 echarts
import * as echarts from 'echarts';


//
mounted() {
        this.makeUpEcharts(1, 40, 'mychartOne', '白词占比', 'rgb(119,193,241)')
        this.makeUpEcharts(1, 20, 'mychartTwo', '黑词占比', 'rgb(236,100,92)')
    },

//
methods: {
makeUpEcharts(el, makeUp_val, id, ratio, background) {
        let color = ['#EAF1FF', '#73A0FA']; //圆环两色

        let echartData = [{
            value: makeUp_val,
            name: ratio,
            itemStyle: {
              color: background,
            },
            label: {
              show: true,
              fontSize: '15',
              fontWeight: 'bold',
              // formatter: '{b}\n\n{d}%',
              position: 'center',
              color: 'rgb(162,162,162)',
            },
          },
          {
            value: 100 - makeUp_val,
            name: '',
            itemStyle: {
              color: 'rgba(238,238,238)',
            },
            label: {
              show: false,
              fontSize: '16',
              fontWeight: 'bold',
              formatter: '{b}\n\n{d}%',
              position: 'center'
            },
          },

        ];


        var option = {

          color: color,
          series: [{
            type: 'pie',
            radius: ['60%', '90%'], //控制圆环大小
            center: ['50%', '50%'], //控制圆环位置
            data: echartData,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                borderWidth: 2
              }
            },
            label: {
              show: true,
              fontSize: '16',
              fontWeight: 'bold',
              formatter: '{b}\n\n{d}%',
              position: 'center'
            },
          }]

        };
        let myChart = echarts.init(document.getElementById(id));
        myChart.setOption(option)
      },
}