echarts配置项(datazoom、markPoint、itemStyle)的使用

• 根据图表数据的多少来显示datazoom，只设置show的布尔值，在show: false的时候图表展示的数据也会过滤掉datazoom里设置的start，end值的范围；所以要同时控制这几个参数。如果没有额外定义start，end则不需要处理。

dataZoom: [
              {
                type: 'slider',
                show: !!(arr.length>32),
                start: arr.length>32 ? 40 : 0,
              }
            ],

• datazoom存在的情况下折线图数据动态变化时开头的点会多出一条竖线，想要去掉可以添加属性filterMode: 'empty'

  dataZoom: [
    {
        type: 'slider',
        show: true,
        ...
        filterMode: 'empty'
    }
  ]

• 柱状图表数据只想展示最大、最小值的数据但不要标记图标，而且负数的数字展示跟正数一样距离图表有一定距离不是在柱子上，可以通过设置Markpoint图标的itemStyle颜色设置

series: [
              {
                type: 'bar',
                barMaxWidth: 20,
                barCateGoryGap: '10',
                markPoint: {
                  symbol: 'pin',  // 设置标记点的图标为箭头
                  symbolSize: function (value) {
                    if (value > 0) {
                      return 20;  // 大于0的值朝上
                    } else if (value < 0) {
                      return -30;  // 小于0的值朝下
                    } else {
                      return 0;  // 等于0的值不显示标记点
                    }
                  },
                  itemStyle: {//颜色透明来隐藏图标
                    color: 'rgba(255,255,255,0)'
                  },
                  label: {
                    color: '#333'
                  },
                  data: [
                    { name: 'mark', type: 'max' },  // 显示最大值的标记点
                    { name: 'mark', type: 'min' }   // 显示最小值的标记点
                  ]
                },
                data: dataArr
            }]

• 折线图上的图标根据数据不同显示不同的图标及颜色可以通过itemStyle和symbol设置

  // 获取到数据时循环处理数据
  for (var i = 0; i < data.length; i++) {
      let arr = []
      arr.push({
          value: data[i].value,
          itemStyle: {
              // getIconColor自定义的根据不同条件返回不同颜色字段
              color: this.getIconColor(data[i])
          },
          // getIconSvg自定义的根据不同条件返回不同svg图标
          symbol: 'path://' + this.getIconSvg(data[i])
      })
  }