echarts问题总结

1.点击事件简单应用

const _this = this// vue中参数传递
this.chartOne = echarts.init(document.getElementById('chartOne'));
this.chartTow.setOption(optionOne); //设置option
this.chartTow.getZr().on('click', (params) => {// getZr()
          if (!params.target) { // 点击在了空白处，做些什么。
            _this.isdel = true;// 作为普通变量传给内部
          }
        });


// zrender 事件与echarts 事件不同。前者是当鼠标在任何地方都会被触发，
// 而后者是只有当鼠标在图形元素上时才能被触发。
myChart.getZr().on('click', function (event) {
    // 该监听器正在监听一个`zrender 事件`。
});
myChart.on('click', function (event) {
    // 该监听器正在监听一个`echarts 事件`。
});

// zrender事件，我们就可以实现 “监听空白处的事件”
myChart.getZr().on('click', function (event) {
    // 没有 target 意味着鼠标/指针不在任何一个图形元素上，它是从“空白处”触发的。
    if (!event.target) {
        // 点击在了空白处，做些什么。
    }
});

2.vue 单个页面循环多个echars

<template>
<div>
      <el-row>
        <el-col :span="8" v-for="i in 6">
          <div :ref="'roseChart'" style="height:260px; margin: 10px; width: 100%;">
          </div>
        </el-col>
      </el-row>
    </div>
</template>

// js 
// 循环获取roseChart
        for(var i=0;i<this.$refs.['roseChart'].length;i++){
          let myChart = echarts.init(this.$refs.['roseChart'][i]);
          myChart.setOption(optionOne);
          myChart.getZr().on('click', (params) => {
            if (!params.target) { // 点击在了空白处，做些什么。
              _this.isdel = true;
            }
          });
        }

3.给柱状图的柱子添加颜色

optionOne.series.forEach(item => {
              item['itemStyle'] = {
                normal: {
                  color: function() {
                    return '#' + Math.random().toString(16).substr(2, 6).toUpperCase();
                  }
                }
              }
            })

4.用函数给颜色定值

{
    color: (()=>{
        let res = [];
        var len = 100;
        for (var i = 0, size = len; i < size; i++) {
            res.push('#' + Math.random().toString(16).substr(2, 6).toUpperCase());
        }
        return res;
        })(),
}
// 函数的样式不同
{
    color: function() {
        return '#' + Math.random().toString(16).substr(2, 6).toUpperCase();
    }
}

5.将返回的数据填充到表格

line或bar data对应方法中的res.push([result[i].regionName, result[i].nums]); 填充方式不同

init(param) {
        this.chartcity = echarts.init(this.$refs.cityDom);
        listCitys(param).then(res => {
          this.chartData = res.rows;
          let result = this.chartData;
          this.optioncity = {
            textStyle: {
              color: '#ffffff'
            },
            tooltip: {
              trigger: 'item'
            },
            xAxis: {
              type: 'category',
              axisLine: {
                lineStyle: {
                  color: '#ffffff',
                  width: 1, //这里是为了突出显示加上的
                }
              }
            },
            yAxis: {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#ffffff',
                  width: 1, //这里是为了突出显示加上的
                }
              }
            },
            series: [{
              data: (() => {
                let res = [];
                let len = result.length;
                for (let i = 0, size = len; i < size; i++) {
                  res.push([result[i].regionName, result[i].nums]);
                }
                return res;
              })(),
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              },
              itemStyle: {
                normal: {
                  color: function() {
                    return '#' + Math.random().toString(16).substr(2, 6).toUpperCase();
                  }
                }
              }
            }]
          };
          window.onresize = this.chartcity.resize;
          this.chartcity.setOption(this.optioncity); //设置option
        })
      }

pie res.push({ name: result[i].className, value: result[i].nums });

init(param) {
        this.chartPie = echarts.init(this.$refs.pieDom);
        listChartPies(param).then(res => {
          this.chartData = res.rows;
          let result = this.chartData;
          this.optionPie = {
            title: {
              left: 'center',
            },
            legend: {
              bottom: 'bottom',
              orient: 'vertical',
              textStyle: {
                color: '#ffffff'
              },
            },
            color: ['#5f9dff', '#6be1c1', '#ffed79', '#ee5959', '#7d92d4', '#00ff7f'],
            tooltip: {
              trigger: 'item'
            },
            series: [{
              center: ["50%", "40%"],
              // name: '访问来源',
              type: 'pie',
              radius: '50%',
              data: (() => {
                let res = [];
                let len = result.length;
                for (let i = 0, size = len; i < size; i++) {
                  res.push({
                    name: result[i].className,
                    value: result[i].nums
                  });
                }
                return res;
              })(),
            }]
          };
          window.onresize = this.chartPie.resize;
          this.chartPie.setOption(this.optionPie); //设置option
        })
      }

6.修改弹出提示

tooltip: {
    trigger: 'item',
    formatter: (params) => {
        return params.marker + params.name + ': ' + params.value + '元';
    }
},

 7.legend分为左右两份布局

// 后端返回数据。。。
let legendData = ["刑满释放人员","吸毒人员","宗教极端人员","收押人员","收教人员","收监人员","易感染人员","涉众","涉军","涉核参战人员","涉访人员","社区矫正","精神病人员","艾滋病人员","解救人员","连管人员","邪教人员",]

// echarts部分。。。。
legend: [
  {
    icon: "bar",
    textStyle: {
      color: "#2efcfa",
    },
    data: legendData.slice(0, 8),
    left: "left",
    bottom: 'bottom',
  },
  {
    icon: "bar",
    textStyle: {
      color: "#2efcfa",
    },
    data: legendData.slice(8, 16),
    right: "right",
    bottom: 'bottom',
  }
],

8.显示的字太长

formatter: (params) => {
        if (params.length > 5) {
            return params.substring(0, 5) + '...'
        } else {
            return params
        }
    },

9.echarts设置滑过可点击区域时将鼠标变为小手样式（一般与区域点击事件结合使用）

// 方法1
let that = this;
this.chartPie.getZr().on('mousemove', param => {
    that.chartPie.getZr().setCursorStyle('pointer')
});

// 方法2
<div id='chartsbar'></div>
 
<style>
#chartsbar>div>canvas:hover{
        cursor: default;
    }
</style>

10.echarts获取点击位置

this.chartbar.getZr().on('mousemove', param => {
    let pointInPixel = [param.offsetX, param.offsetY];
    if (!_this.chartbar.containPixel('series', pointInPixel)) {
        _this.chartbar.getZr().setCursorStyle('pointer');
    }
});

11.echarts使用getZr()点击事件获取柱状图数据

chart.getZr().on('click', (params) => {
				let pointInPixel = [params.offsetX, params.offsetY];
				if (chart.containPixel('grid', pointInPixel)) {
					let pointInGrid = chart.convertFromPixel({
						seriesIndex: 0
					}, pointInPixel);
					let xIndex = pointInGrid[0]; //索引
					let handleIndex = Number(xIndex);
					let seriesObj = chart.getOption(); //图表object对象
					console.log(handleIndex, seriesObj);
				};
			});

12 echarts适用饼图直观显示数值方式

series: [{
    name: title,
    type: 'pie',
    radius: '50%',
    data: data,
    itemStyle: {
        normal: {
            label: {
                show: true,
                formatter: '{b} : {c} ({d}%)'
            },
            labelLine: { show: true }
        }
     }
}]

13.echarts 面积图颜色渐变

areaStyle为面积参数

series: [{
  name: '本月',
  smooth: true,
  data: data,
  type: 'line',
  areaStyle: {
    color: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
        offset: 0, color: '#5f9dff'  // 100% 处的颜色
      }, {
        offset: 1, color: '#0c1268' //   0% 处的颜色
      }],
      global: false // 缺省为 false
    }
  },
  color: '#5f9dff', //线条颜色
},]

14.柱状图颜色渐变

series: [{
  type: 'bar',
  data: dataBar,
  barWidth: 8,
  itemStyle: {
    normal: {
      // X轴是数据轴
      //柱形图圆角，初始化效果
      barBorderRadius: [0, 15, 15, 0],
      // 线性渐变色
      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        { offset: 0, color: '#006da8' },
        { offset: 1, color: '#31b7ff' },
      ])
      // Y轴是数据轴
      // barBorderRadius: [15, 15, 0, 0],
      // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //   { offset: 0, color: '#006da8' },
      //   { offset: 1, color: '#31b7ff' },
      // ])
    },
  },
  label: {
    show: true,
    position: 'right',
    color: '#FFFFFF'
  },
}]
// 圆心渐变
new echarts.graphic.RadialGradient(0.5,0.5,1.0, [
  { offset: 0, color: '#00ffff' },
  { offset: 1, color: '#55aaff' },
])
// 圆心渐变
color: {
  type: 'radial', // 径向渐变
  x: 0.5,  // 圆心点x轴，0.5为柱状图宽度中心
  y: 0.5,  // 圆心点y轴，0.5为柱状图高度中心
  r: 0.5,   // 半径
  colorStops: [
    {
     offset: 0, color: 'red' // 0%处的颜色为红色
    },
    {
      offset: 1, color: 'blue' // 100%处的颜色为蓝
    }
  ]
}
// 线性渐变
color: {
  type: 'linear', 
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  colorStops: [{
      offset: 0,
      color: 'red' // 0%处的颜色为红色
  }, {
      offset: 1,
      color: 'blue' // 100%处的颜色为蓝
  }]
}

15.Echarts数据可视化legend图例属性设置

legend={
  show:true,                                  //是否显示
  zlevel:0,                                   //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
  z:2,                                         //所属组件的z分层，z值小的图形会被z值大的图形覆盖
  left:"center",                              //组件离容器左侧的距离,'left', 'center', 'right','20%'
  top:"top",                                   //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
  right:"auto",                               //组件离容器右侧的距离,'20%'
  bottom:"auto",                              //组件离容器下侧的距离,'20%'
  width:"auto",                               //图例宽度
  height:"auto",                              //图例高度
  orient:"horizontal",                        //图例排列方向
  align:"auto",                               //图例标记和文本的对齐,left,right
  padding:5,                                   //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
  itemGap:10,                                  //图例每项之间的间隔
  itemWidth:25,                               //图例标记的图形宽度
  itemHeight:14,                              //图例标记的图形高度
  formatter:function (name) {                 //用来格式化图例文本，支持字符串模板和回调函数两种形式。模板变量为图例名称 {name}
      return 'Legend ' + name;
  },
  selectedMode:"single",                    //图例选择的模式,true开启,false关闭,single单选,multiple多选
  inactiveColor:"#ccc",                     //图例关闭时的颜色
  textStyle:mytextStyle,                    //文本样式
  data:['类别1', '类别2', '类别3'],          //series中根据名称区分
  backgroundColor:"transparent",            //标题背景色
  borderColor:"#ccc",                         //边框颜色
  borderWidth:0,                               //边框线宽
  shadowColor:"red",                          //阴影颜色
  shadowOffsetX:0,                            //阴影水平方向上的偏移距离
  shadowOffsetY:0,                            //阴影垂直方向上的偏移距离
  shadowBlur:10,                               //阴影的模糊大小
};

16.vue引用和使用echarts4/echarts5的差别

4版本

import echarts from 'echarts'

5版本

import * as echarts from 'echarts'
// 或者
const echarts = require('echarts');

17.echarts,除了点击legend,其他 部分可以触发跳转

this.chart.getZr().on('click', (params) => {
        if (!params.target) {
          this.$router.push({
            path: path
          });
        }
      });

18. series-pie. startAngle

起始角度，支持范围[0, 360]。可以控制饼图的开始角度,防止标签溢出图表

19. echarts y轴的字左对齐

grid 下的 left: '-15%'

yAxis.axisLabel 下的margin: 220, 刻度标签与轴线之间的距离

yAxis.axisLabel.textStyle: { align: 'left' //** }

通过这个这三个原始联调配置

20:设置markPoint

 

series: [
          {
            name: 'test',
            data: [['02月',100],['03月',97]],
            type: 'line',
            markPoint: {
              data: [{
                xAxis: '02月', // x轴坐标
                yAxis: '100',  // y轴坐标
                value: '100',  // y轴的值
              }]
            }
          }
        ]