echarts——实现大屏数据展示——基础积累（超详细）

最近在做大屏数据展示，样式真的超级好看。但是细节处理也是比较麻烦的。

最终效果图如下：

下面对我遇到的几个知识点进行汇总：

1. 横向的柱状图——设置yAxis的type为category即可

var option = {
   title: {
       text: ''
   },
   tooltip: {
       trigger: 'axis',
       axisPointer: {
           type: 'shadow'
       }
   },
   grid: {
       left: '-80',
       right: '40',
       bottom: '0',
       top: '10',
       containLabel: true
   },
   xAxis: {
       type: 'value',
       show: false,
       boundaryGap: [0, 0.01]
   },
   yAxis: {
       type: 'category',
       show: false,
   },
   series: [
       {
           name: '',
           type: 'bar',
           data: data,
           color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
               {
                   offset: 0,
                   color: 'transparent'
               },
               {
                   offset: 1,
                   color: '#f90'
               }
           ]),
           label: {
               normal: {
                   show: true,
                   position: 'right',
                   formatter: '{c}',
                   color: '#fff'
               }
           },
           barWidth: 20,
       }
   ]
};
dom.setOption(option);

下面详细解析：

1.1 标题——title

title: {
   text: '',//主标题
   subText:'',//副标题
},

1.2 输入移入的效果——tooltip

下面是最简单的效果了，如果需要复杂的效果，需要单独设置

tooltip: {
    trigger: 'axis',
    axisP