Echart使用过程中问题总结

Bertha 。 2023-09-30 06:26 5阅读 0赞

**目录**

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

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

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

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

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

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

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

7.echarts饼图图例一行一个

8.图例位置和大小

--------------------

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

> 1.npm i echarts
> 
> 2.引入：在main.js中，import \* as echarts from 'echarts'、Vue.prototype.$echarts = echarts
> 
> 3.使用：在其他需要用的.vue文件中，通过this.$echarts使用

--------------------

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

> ***\*将xAxis与yAxis里面的内容互换\**，可以横纵切换展示**

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

--------------------

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

> **设计稿的图例是分两列，并且左对齐排列，解决方法是，legend用一个数组，并且 数组每一项orient 设置为’vertical’（垂直）。**

// 封装公共饼图
        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饼图图例自定义设置 ###

> **图例和 [label][]自定义主要通过 formatter: function()\{\}实现，在legend属性里面**

图例样式设置： 
     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柱状图纵向变横向或者横向变纵向简单做法 ###

> **直接将yAxis改成xAxis,反之亦然，就改一下字母，即可**

--------------------

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

> **在xAxis:\[\{show:false\}\]注意位置！**

--------------------

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

> **将柱状图封装为一个子组件，然后将v-for里面的item传过去，子组件监听item，重新赋值**

--------------------

### 7.echarts饼图图例一行一个 ###

> **解决：****设置legend的宽度就可以实现。**
> 
> **或者其他方法：**
> 
>  **1.legend.width是显示图例的区域的宽度 宽度不够自动换行**
> 
>  **2.formatter进行设值**

--------------------

### 8.图例位置和大小 ###

>  **位置：为了兼容性，最好用**
> 
> **x:'left'**, **可设定图例在左、右、居中**
> 
> **y:'center'**,***可设定图例在上、下、居中***

**大小：**

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

[label]: https://so.csdn.net/so/search?q=label&spm=1001.2101.3001.7020