echarts 饼状图入门使用

复制代码
import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    right: 0,
    top: 'center',
    itemGap: 20,
    itemWidth: 8,
    itemHeight: 8,
    icon: 'circle',
    formatter: function (name) {
      let flag = null;
      flag = option.series[0].data;
      for (var i = 0; i < flag.length; i++) {
        if (flag[i].name === name) {
          return name + '      ' + flag[i].value;
        }
      }
    }
  },
  series: [
    {
      center: ['20%', '50%'], //设置饼状图位置
      type: 'pie',
      radius: '50%',
      radius: ['0%', '25%'], //控制饼状图大小,是否空心
      data: [
        { name: '已处理', value: 123 },
        { name: '未处理', value: 200 },
        { name: '处理中', value: 232 }
      ],
      label: {
        show: false,
        position: 'center'
      },
      itemStyle: {
        // 设置每个数据项的样式
        color: function (params) {
          // 自定义颜色函数
          var colorList = ['#29BF8A', '#F1A14C', '#009AFF']; // 自定义颜色列表
          return colorList[params.dataIndex]; // 返回对应索引位置的颜色值
        }
      },
      labelLine: {
        show: false // 隐藏引导线
      }
    }
  ]
};

option && myChart.setOption(option);
复制代码

 



posted @   龙卷风吹毁停车场  阅读(22)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
历史上的今天:
2023-03-15 v-for 循环出来的元素,hover的时候对应更换img地址
点击右上角即可分享
微信分享提示