Echarts 使用玫瑰图

奈子米

已于 2024-02-06 14:03:22 修改

阅读量1k

点赞数

分类专栏： vue 文章标签： echarts vue.js

于 2022-03-26 14:38:14 首次发布

本文链接：https://blog.csdn.net/zhanggei/article/details/123755635

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

  const createVideoEcharts = val => {
      let histogram = document.getElementById('echartAnswer');
      let myChart = echarts.init(histogram);
      let arr = [];
      // val = res.data.typeNum;
      for (let i = 0; i < val.length; i++) {
        let obj = {};
        obj.name = val[i].num;
        if (data.cateType === 1) {
          switch (val[i].groupName) {
            case '错':
              obj.itemStyle = { color: '#ffbf84' };
              obj.value = 60;
              break;
            case '对':
              obj.itemStyle = { color: '#b28ffe' };
              obj.value = 50;
              break;
            case '半对半错':
              obj.itemStyle = { color: '#fe8f8f' };
              obj.value = 40;
              break;
            default:
              break;
          }
        } else if (data.cateType === 2) {
          switch (val[i].groupName) {
            case '√':
              obj.itemStyle = { color: '#ffbf84' };
              obj.value = 60;
              break;
            case '×':
              obj.itemStyle = { color: '#fe8f8f' };
              obj.value = 50;
              break;
            default:
              break;
          }
        } else if (data.cateType === 3) {
          switch (val[i].groupName) {
            case '未做':
              obj.itemStyle = { color: '#ffbf84' };
              obj.value = 60;
              break;
            case '已做':
              obj.itemStyle = { color: '#fe8f8f' };
              obj.value = 50;
              break;
            default:
              break;
          }
        } else {
          switch (val[i].groupName) {
            case 'A':
              obj.itemStyle = { color: '#ffbf84' };
              obj.value = 60;
              break;
            case 'B':
              obj.itemStyle = { color: '#fe8f8f' };
              obj.value = 50;
              break;
            case 'C':
              obj.itemStyle = { color: '#b28ffe' };
              obj.value = 40;
              break;
            case 'D':
              obj.itemStyle = { color: '#f9de80' };
              obj.value = 35;
              break;
            default:
              break;
          }
        }
        arr.push(obj);
      }
      let option;
      option = {
        // title: {
        //   text: 'Referer of a Website',
        //   subtext: 'Fake Data',
        //   left: 'center'
        // },
        // tooltip: {
        //   trigger: 'item'
        // },
        // legend: {
        //   orient: 'vertical',
        //   left: 'left'
        // },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            // radius: '50%',
            radius: [50, 150],
            center: ['50%', '50%'],
            roseType: 'area',
            startAngle: 150,
            label: {
              show: false
            },
            data: arr
          }
        ]
      };
      option && myChart.setOption(option);
    };