0.echarts在vue项目中全局使用

1.echarts 柱状图如何横向展示

xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
},
yAxis: {
          type: 'category',
          data: [24210,32524,50434,52421,98742]
},

2.echarts 饼图（pie）的封装（各属性的讲解以及使用，自定义图例排列方式）

 // 封装公共饼图
    commonPie(echart, seriesName, pieData) {
      // 基于准备好的dom，初始化echarts实例
      const echarts = require('echarts')
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(echart)
      // 绘制图表
      myChart.setOption({
        backgroundColor: '', // 背景颜色透明
        title: {
          text: '' // 因为所有图表的标题都是自己定义的，所以这里置空，有需要请自行查阅文档，文档还是要看的喽，不能偷懒哦。
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        // 设置饼图的颜色
        color: ['#F76367', '#17D982', '#FA8D3D', '#8B71F7'],
        legend: [{
          // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
          orient: 'vertical',
          icon: 'roundRect',
          left: '15%',
          bottom: 30,
          itemWidth: 18, // 设置图例图形的宽
          itemHeight: 9, // 设置图例图形的高
          textStyle: {
            color: '#fff', // 图例文字颜色
            padding: [0, 0, 0, 12] // 设置图例icon距离文字的距离
          },
          // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
          itemGap: 20,
          data: pieData.slice(0, Math.ceil(pieData.length / 2)).map(item => {
            return item.name
          })
        }, {
          // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
          orient: 'vertical',
          icon: 'roundRect', //这里有很多参数可选，按需要自行查阅文档
          right: '15%',
          bottom: 30,
          itemWidth: 18, // 设置图例图形的宽
          itemHeight: 9, // 设置图例图形的高
          textStyle: {
            color: '#fff', // 图例文字颜色
            padding: [0, 0, 0, 12]
          },
          itemGap: 20,
          data: pieData.slice(Math.ceil(pieData.length / 2)).map(item => {
            return item.name
          })
        }],
        series: [
          {
            name: seriesName,
            type: 'pie',
            radius: '55%',// 设置环形饼状图， 第一个参数设置内圈大小，第二个参数设置外圈大小，一个参数表示是实心饼，实惠好吃，加量不加价！！！
            center: ['50%', '35%'],// 设置饼状图位置，第一个参数设置水平位置，第二个参数设置垂直位置
            label: {
              show: false
            },// 隐藏值域的那条指向线
            data: pieData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              } // emphasis用来设置鼠标放到扇形上时的扇形样式、阴影
            }
          }
        ]
      })
      this.resizeEcharts(echart, myChart) 
    },

3.echarts饼图图例自定义设置

图例样式设置： 
 legend: {
         orient: 'vertical',
          left:10,
          top:50,
          itemWidth: 20, // 设置宽度
          itemHeight: 20, // 设置高度
          itemGap: 15, // 设置间距
          textStyle: {
            // 文字颜色
            color: 'black',
            // 字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 
            fontWeight: '700',
            // 字体系列
            // fontFamily: 'Source Han Sans CN',
            // 字体大小
            fontSize: 14
          },
    图例文字设置--设置展示什么数据-根据自己的逻辑修改
          formatter: 
           function(name){
                let item = _that.rightTypeList
                  var selectNameList1 = [];
                    for (var key in item.cve_intell_count) {
                    
                      if (key === "poc_source_count") {
                        selectNameList1.push({
                          name: "漏洞概述信息",
                          value:item.cve_intell_count[key]
                        });
                        // return "漏洞概述信息"+item.cve_intell_count[key]
                      } else if (key === "vn_artic_count") {
                        selectNameList1.push({
                          name: "漏洞分析情报",
                          value:item.cve_intell_count[key]
                        });
                        //  return "漏洞分析情报"+item.cve_intell_count[key]
                      } else if (key === "poc_intel_count") {
                        selectNameList1.push({
                          name: "漏洞预警信息",
                          value:item.cve_intell_count[key]
                        });
                      } else if (key === "other_intel_count") {
                        selectNameList1.push({
                          name: "漏洞验证信息",
                          value:item.cve_intell_count[key]
                        });
                      } else if (key === "vn_intel_count") {
                        selectNameList1.push({
                          name: "其他相关情报",
                          value:item.cve_intell_count[key]
                        });
                      }
                    }
                  var target
                  for (var i = 0, l = selectNameList1.length; i < l; i++) {
                      if (selectNameList1[i].name == name) {
                          target = selectNameList1[i].value;
                      }
                  }
                  return name + ' ' + ' ' + ' ' + target;
              
              }

4.echarts柱状图纵向变横向或者横向变纵向简单做法

5.echarts柱状图隐藏横坐标文字

6.左侧10个tab选项，点击时，右侧显示柱状图，右侧柱状图数量不等，大于等于1.让数据实时改变

7.echarts饼图图例一行一个

8.图例位置和大小

大小：

textStyle: {
            // 文字颜色
            color: 'black',
            // 字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
            fontWeight: '700',
            // 字体系列
            // fontFamily: 'Source Han Sans CN',
            // 字体大小
            fontSize: 12
          },