【Vue】vue中echarts的使用

在中间添加文字

option:{
  title: {
  // 图形标题(如果想要换行则使用ES6 `` 模板字符串)
  // 例如： `示例
  //   这里的文字会变为第二行(因为会保留格式)
  //  `
  text: '文字',  
  left: "center",//对齐方式居中
  top: "45%",//距离顶部
  textStyle: {//文字配置
    color: "rgb(50,197,233)",//文字颜色
    fontSize: 15,//字号
    align: "center"//对齐方式
    }
  }
}

柱状图柱子值太小点不上可点击所在列

option={
  tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              _params = params
            }
          }
}
// 点击柱状图显示对应的信息
// 在添加点击事件之前一定要解绑上一次的事件
        this.zzt.myChart.getZr().off('click')
        this.zzt.myChart.getZr().on('click', params => {
          const pointInPixel = [params.offsetX, params.offsetY]
          if (this.zzt.myChart.containPixel('grid', pointInPixel)) {
            // 执行代码
            console.log(_params)
          }
        })

实现动态数据渲染

// data中添加饼状图的信息对象
bingtu1: {
        myChart: null,
        option: null,
        data: []
      },
// 在watch中监视data数据
    'bingtu1.data': {
      deep: true,
      handler(newval, oldval) {
        // eslint-disable-next-line no-var
        setTimeout(() => {
          this.bingtu1.myChart = echarts.init(
            document.querySelector('.jiegoubottom1 .tubiao1')
          )

          // eslint-disable-next-line no-var
          this.bingtu1.option = {
            color: ['#008cfe', '#FF8A5B', '#00CEFE'],
            series: [
              {
                center: ['30%', '50%'],
                type: 'pie',
                color: ['#eef5ff'],
                radius: ['40%', '0%'],
                avoidLabelOverlap: false,
                label: {
                  normal: {
                    show: true,
                    position: 'center',
                    formatter: '{active|总计}' + '\n\r' + '{total|' + this.list.length + '}',
                    rich: {
                      total: {
                        fontSize: 25,
                        // 字体加黑
                        fontWeight: 'bold',
                        fontFamily: '微软雅黑',
                        color: '#454c5c'
                      },
                      active: {
                        fontFamily: '微软雅黑',
                        fontSize: 15,
                        color: '#6c7a89',
                        lineHeight: 30
                      }
                    }
                  },
                  emphasis: {
                    // 中间文字显示
                    show: true
                  }
                },
                lableLine: {
                  normal: {
                    show: false
                  },
                  emphasis: {
                    show: true
                  },
                  tooltip: {
                    show: false
                  }
                },
                data: [{ value: 484, name: 'Union Ads' }]
              },
              {
                name: 'Access From',
                center: ['30%', '50%'],
                type: 'pie',

                radius: ['50%', '70%'],
                avoidLabelOverlap: true,
                itemStyle: {
                  borderRadius: 0,
                  borderColor: '#fff',
                  borderWidth: 2
                },

                label: {
                  show: false,
                  position: 'center'
                },
                labelLine: {
                  show: true
                },
                data: newval
              }
            ]
          }
          this.bingtu1.myChart.setOption(this.bingtu1.option)
        }, 200)
      }
    },

图表标签lable的大小位置

// 也可以在data中单独定义
label: {
        show: true,
        fontSize: 13,
        formatter: '{b} : {c} ({d}%)' //标签显示百分比 类型+百分比
        },
labelLine: {
     show: true
            },
// data中定义时可以自定义当前标签的位置
data：[{
              value: 54,
              name: '24.75%',
              labelLine: {
                show: true,
                length: 80,
                length2: -70
              },{
              value: 54,
              name: '24.75%',
              labelLine: {
                show: true,
                length: 80,
                length2: -70
              },{
              value: 54,
              name: '24.75%',
              labelLine: {
                show: true,
                length: 80,
                length2: -70
              }]

echarts自定义图标图例文字

如果为单图例

使用字符串模板，模板变量为图例名称 {name}
formatter: 'Legend {name}'
或者使用回调函数
formatter: function (name) {
    return 'Legend ' + name;
}
如果是柱状图，并且为双图例
则使用
 formatter:  function(name){
    if(name==='zhengzhi'){
      return '正职'
    }
    if(name==='fuzhi'){
      return '副职'
    }
    
},
name为  dataset中给定的name值