echars配置

圆形配置

   let myChart = echarts.init(document.getElementById('middle-left'));
      this.middleLeftresize =myChart
  let option = {
              color:['#f69305','#f7bd00','#42d47e','#3ba4ff'],
              title: {
                text: '11月被罚情况',
                left: 'left'
            },
            tooltip: {
                trigger: 'item',
              //  formatter: '{a} <br/>{b}: {c} ({d}%)'
               formatter: function (params) {//自定义
                //  console.log(params)
                 let res=""
                 arr.forEach((item)=>{
                  //  console.log((Math.abs(item)==params.value))
                   if(Math.abs(item)==params.value){
                     res=item>0? params.seriesName +'<br>'+ params.name+"： "+params.value+"（"+params.percent+"%）":params.seriesName +'<br>'+ params.name+"："+"-"+params.value+"（"+params.percent+"%）"
                   }
                 })
                 return res
               }
            },
            legend: {
                bottom: 0,
                left: 'center',
                icon: "circle",   //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
                itemWidth: 10,  // 设置宽度
                itemHeight: 10, // 设置高度
              itemGap: 40 // 设置间距
                textStyle: {
                  // color: '#fff',
                  fontSize: 12
                },
                data: ['中转运营部', '网点管理部', '市场营销部', '客服中心']

            },
          series: [
              {
                  name: '访问来源',
                  type: 'pie',
                  radius: ['50%','70%'],
                  center: ['40%', '50%'],
                  label:{
                    formatter:"{c}元"
                  },
                  data: [
                      {value: 335, name: '中转运营部' ,label: { formatter:tsf_fine_amt>0 ?"{c}元":"-{c}元"}},
                      {value: 234, name: '网点管理部'},
                      {value: 135, name: '市场营销部'},
                      {value: 1548, name: '客服中心'}
                  ],
                  emphasis: {
                      itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
     myChart.on('click', function (params) {
            alert(params.name);
        });

ECharts 中事件分为两种类型:

用户鼠标操作点击，如 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu' 事件。

还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 'legendselectchanged' 事件），数据区域缩放时触发的 'datazoom' 事件等等。

this.middleLeftresize.resize()