[Echarts] 史上最全常用属性讲解(附差异图)（不断更新），及图表的点击事件,重复点击的bug，自适应屏幕宽度事件处理。

[Echarts] 史上最全常用属性讲解(附差异图)（不断更新），及图表的点击事件,重复点击的bug，自适应屏幕宽度事件处理。

作为一名程序员，更或者是前端工作人员，都离不开图形数据。不论是现在的管理系统b端，pc端，还是移动端的数据展示，都离不开图表，离不开echarts。近期我在开发前端b端时就用到了echarts，为了匹配设计图ui，尝试了各种参数，也是被整的很头疼，为了方便日后的使用，特此记录，大家如果用得到可以点赞收藏，日后也是会现在持续更新，添加修改此篇文章！

注：可以通过小标题查找你的答案

1：左上角文字标题字体大小，颜色：

textStyle

title: {
  textStyle: {
  fontSize: 14,
  fontFamily: 'Source Han Sans CN, Source Han Sans CN;',
  fontWeight: 400,
  color: '#34344C',
},
}

无参数：

有参数：

2：左上角文字标题字体偏移量：

  title: {
      text: '测试',
      left: 20,
      top: 10,
    },

无参数：

有参数：

3：图例位置：

legend

  legend: {
      orient: 'vertical',
      right: 10,
      top: 10
  },

无参数：

有参数：

4：横坐标显示刻度与轴线：

axisTick/axisLine

    xAxis: {
      axisTick: {
        show: false
      },
      axisLine: {//坐标轴轴线
        show: false
      },
    },

无参数：

有参数：

5：纵坐标显示刻度与轴线：

axisLabel/splitLine

  yAxis: {
      axisLabel: {//坐标轴刻度标签
        show: false
      },
      splitLine: {//坐标轴在grid区域中的分割线
        show: false
      },
  },

无参数：

有参数：

6：柱形图提示文字位置，提示内容，大小，偏移量：

label(series内每个子对象)

        label: {
          show: true,
          position: 'top',
          formatter: function (v) {
            let data = xxx数据操作
            return data//当前使用的是 return '文字'
          },
          fontSize: 10,
        offset: [-30, 0] // y轴上不变，x轴向上偏移-30像素
        },

无参数：

有参数：

7：柱形图柱子边角border-radius：

itemStyle(series内每个子对象)
无参数：

有参数：

8：柱形图柱子宽度：

barWidth(series内每个子对象)

        barWidth: '15px', // 设置柱宽为系列宽度的15px

无参数：

有参数：

9：柱形图背景颜色，阴影：

showBackground(series内每个子对象)，backgroundStyle

showBackground: true,
//两者同级
backgroundStyle: {
    color: 'rgba(228, 222, 249, 1)',
    shadowColor: 'rgba(190,172,241,100.79)',
    shadowBlur: [30, 20, 70, 10],
 },

无参数：

有参数：

10：y轴设置条数，及虚线：

splitNumber,splitLine

splitNumber：3，
 splitLine:{
     lineStyle: {
          type: 'dashed' // 设置为虚线，可选值为 'solid', 'dashed', 或 'dotted'
     }
 }

无参数：

有参数：

11：x轴过长展示，添加滑动效果：

dataZoom

//和series同级
 dataZoom: [
      {
        type: 'inside',
        // 从哪里的百分比开始
        start: 0,
        end: 50,
      },
 ],

无参数：

有参数：

echarts图表的点击事件,，点击累加的bug，自适应屏幕宽度

1：点击事件：

on(‘click’)

 function getChartData () {
    const columnCharts = echarts.init(document.getElementById('columnCharts')) // 图标初始化
    columnCharts.setOption(option)
    // name是横坐标  seriesName是数据名   value是纵坐标
    columnCharts.on('click', function (params) {
      //params的操作
    })
  }

注意，点击事件name是横坐标 seriesName是数据名 value是纵坐标。onclick一定要写在setOption之后，这里的params 对应的是你tooltip下trigger的值，如果设置为’axis‘ ，那么params就是当前x坐标下所有对应的y值的数据，如果设置为‘item’ ，那么就是当前x坐标下的鼠标移入的元素y值的数据。

2：点击事件的累加bug：

off(‘click’)

 function getChartData () {
    const columnCharts = echarts.init(document.getElementById('columnCharts')) // 图标初始化
    columnCharts.off('click')
    columnCharts.setOption(option)
    columnCharts.on('click', function (params) {
      xxx()  //点击后执行一个方法
    })
  }

注意，处理事件的累加bug需要添加.off(‘click’) ，并且一定要写在setOption之前。不加此方法，就会有点击事件的累加bug（第一次点击图表会走xxx方法，第二次点击图表会走2遍xxx方法，以此类推…）

3：图表自适应屏幕大小，随意切换：

resize(‘click’)

 function getChartData () {
    const columnCharts = echarts.init(document.getElementById('columnCharts')) // 图标初始化
    columnCharts.setOption(option)
    // 监听窗口大小变化事件
    window.onresize = function () {
      // 重新设置图表的宽度和高度
      columnCharts.resize();
    }
  }

无参数：

有参数：

注意，设置了此方法后，随意切换屏幕分辨率，图表可以自动刷新，图表会自动根据屏幕分辨率，重新画出对应图表。

ok，暂时先写这么多，如果帮到了大伙，记得点赞收藏哟。也可以进行评论，我会实时回复，继续完善。