Echarts使用记录

1、使用Echarts 绘制柱状图 高亮某一个 官网有个方法可以在data数组里设置颜色 ，这样处理起来数据比较麻烦 ，经过查找 可以使用类似formatter 的方法 在itemStyle图形样式属性的color下写个回调函数

  series: [
          {
            name: '学生人数',
            type: 'bar',
            data: [45, 49, 70, 82, 56, 77, 56, 62, 76, 80, 95, 98],
            barWidth: 38,
            itemStyle: { 
              color: function(params) { 
              // 可以使用下标或者name等值匹配都可以 
                const value = params.value;
                if (value === 82) {
                  return '#9271de';
                } else {
                  return '#ffbe00';
                }
              }
            }
          }
        ]

2、绘制柱状图图表 默认高亮并展示指定某个柱状图的的tooltip，使用dispatchAction 方法来显示 ，但是在setOption后使用dispatchAction 显示tooltip,就会导致在柱状图动画还没有结束时候，tooltip已经显示但是显示在数据为0的位置（期望是在柱状图的顶部显示）可以使用finished事件等动画渲染完成再进行回调

const _this = this;
chart.on('finished', function() { // 渲染完成事件。当渲染动画或者渐进渲染停止时触发 ps：注意 rendered也是渲染结束事件 但是并不代表渲染动画或者渐进渲染停止，只代表本帧的渲染结束。
 _this.chart.dispatchAction({ //注意this指向问题
  type: 'showTip',
  seriesIndex: 0,
  dataIndex: 3
});
});

3、自定义tooltip的样式及内容 extraCssText ：样式设置 ，要么写在行内 。使用过class类名 写在style里 背景什么的好像不生效

tooltip: {
  trigger: 'item',
  position: 'top', //显示的位置
  formatter: params => {
    return `<div class="map_tips" style="position: relative;">
          <div style="position: absolute;width: 1px;height: 1px;border: 5px solid transparent; border-top: 8px solid #000; bottom: -13px;left: 45%;"></div>
          <div class="tip_row"><span>分数: </span><span> 400 - 600</span></div>
          <div class="tip_row"><span>学生数: </span><span> ${params.value}</span></div></div></div>`;
  },
  extraCssText: 'background: #000;padding-bottom: 5px; opacity: 0.59;width:100px;height:36px; font-size: 13px; color: #fff;text-align: left;border-radius: 2px'
},