echarts 饼图 圆环线怎么做

Posted 2023-05-11

参考技术A var chart = eval('[ "counts":3, "region":"东城区" , "counts":2, "region":"朝阳区" , "counts":5, "region":"海淀区" ]');var length = chart.length;var arrays = new Array();for(var i = 0l i < length; i++) arrays[i] = v。

echarts饼图

参考技术A     //基于准备好的dom，初始化echarts实例

    var myChart = echarts.init(this.$refs.main);

    /* 深拷贝一下 生成两个不同的对象 */

    this.lineList = JSON.parse(JSON.stringify(this.reportsList));

    /* 展示标题 */

    this.lineList.title =

      text: "华东饼图数据",

    ;

    /* 展示提示框组件 */

    this.lineList.tooltip =

      /* a表示系列名 <br/>表示换行 b表示数据名 c表示数据值 d表示所占的百分比 */

      formatter: 'a <br> b <br> c <br> (d%)'

    ;

    /* 把图例的位置调整一下 */

    this.lineList.legend.top = '10%';

    this.lineList.legend.left = '0';

    /* 只显示华东的饼图数据 */

    this.lineList.series.splice(1)

    /* 先把图标的类型都改成饼图 */

    this.lineList.series[0].type = 'pie';

    /* 把图例中除了华东的图例都删掉 */

    this.lineList.legend.data.splice(1);

    /* 拿到时间集合用来展示饼图的name值 */

    let nameList = this.lineList.xAxis[0].data;

    /* 拿到数据用来展示饼图的value值 */

    let valueList = this.lineList.series[0].data;

    /*  let data = [

      name:"2017-12-27",

      value:2999

    ] */

    let newArr = [];

    /* 下面的操作是为了把两个数组整合成上面的格式 */

    nameList.forEach((r, i) =>

      let obj =

        name: r,

        /* 因为两个数组的长度是一样的，

        索引对应的值也是一样的，key和value的值是相对应，

        所以直接使用如下方式取值 */

        value: valueList[i]

     

      /* 把组装好的对象塞到新数组中 */

      newArr.push(obj)

    )

 /* 给华东的数据组转好格式后重新赋值，为了展示饼图线对应的名字 */

    this.lineList.series[0].data = newArr;

    /* 设置饼图的圆心的大小和圆的大小 */

    this.lineList.series[0].radius = ['10%', '45%'];

    /* 设置圆的上下左右的距离 */

    this.lineList.series[0].center = ['58%', '60%'];

    /* 把圆的形状设置成玫瑰形 */

    this.lineList.series[0].roseType = 'area';

    /* 给圆设置圆角 */

    this.lineList.series[0].itemStyle =

      borderRadius: 5

   

    /* 把x轴隐藏 */

    this.lineList.xAxis =

      show: false

   

    /* 把y轴隐藏 */

    this.lineList.yAxis =

      show: false

   

    // 绘制图表

    myChart.setOption(this.lineList);

    window.PieChart = myChart;

  ,