Echarts+VUE柱状图绘制细节并且屏幕自适应完整代码

成功自己定义

前言

最近有一个大屏的需求，需要完成一些柱状图、饼图、折线图基本图形的绘制，我果断采取了Echarts来实现这个功能，官方已有很多的demo，但是我这里主要分享一些细节，官方文档看起来比较繁琐，为大家节省时间去查找。
官方文档：Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表：https://echarts.apache.org/zh/index.html

一、先上效果图

下面我按照最开始的顺序详细讲解如何从0开始完成一个你想要的效果图。

1、安装 Echarts：

首先，确保你的项目中已安装了 Echarts。可以通过 npm 或 yarn 进行安装，或者直接在 HTML 文件中引入 Echarts 的源文件。

方法一：从 npm 安装

1. npm install echarts

复制代码

方法二：从 yarn 安装

1. yarn add echarts

复制代码

以vue项目为例：在所需要的组件中使用Echarts

1. import echarts from 'echarts';

复制代码

2、准备数据：

在开始绘制图表之前，需要准备好要显示的数据。这可能包括一个或多个数组、对象或其他数据结构。
柱状图分为X轴和Y轴，这里的数据分为两个，一个是X轴上的数据，一个是Y轴上的数据，都是以数组的形式，他们是一一对应的。通常放在配置项options中（下面会详细介绍配置项options）

3、创建容器：

在 HTML 页面中创建一个容器元素，用于显示图表。可以是一个

1. <div>

复制代码

元素或其他合适的元素。

1. <template>
   
2.     <div class="center-wrap">
   
3.         <div class="headTitle">
   
4.             <img class="my-img" :src="require('../../../assets/images/大            
   
5.                屏/homeScreen_04.png')" alt="" />
   
6.             <span class="title">各地市群众监督员统计情况</span>
   
7.         </div>
   
8. 
   
9.         <div id="center-bottom" class="center-bottom"></div>
   
10.     </div>
    
11. </template>

复制代码

我们只需要关注id为center-bottom的这个容器，它是我们等会要用来绘制柱状图所需要的容器。

4、设置容器样式：

为图表容器设置样式，例如宽度、高度和边距等。这样可以确保图表在页面上正确显示，并适应所需的尺寸。
注意：这里有两处细节可能踩坑
（1）这里必须要设置容器的具体宽高，如果不给容器设置宽高，会无法正常显示图表，原因是Echarts 默认会将图表容器的宽度和高度设置为 0px。
（2）有时候高度如果用百分比设置无效的时候，可以使用px。在给柱状图设置高度时，使用百分比和像素（px）单位的效果可能不同的原因是，百分比高度是相对于其父元素的尺寸进行计算的。如果父元素的尺寸没有明确设置或者无法确定，那么百分比设置可能无法正确地计算出实际的高度值。

1. .center-bottom {
   
2.         width: 100%;
   
3.         height: calc(100% - 36px);
   
4.     }

复制代码

5. 初始化图表实例：

使用 JavaScript 代码创建一个 Echarts 实例，并将其与图表容器相关联。这可以通过调用 echarts.init() 方法来完成。

1. this.chart = this.$echarts.init(document.getElementById("center-bottom"));

复制代码

6、通过配置选项对象来定义图表的样式、数据和其他属性。

可以设置图表类型（如折线图、柱状图、饼图等）、坐标轴、图例、数据系列等。（PS:重点介绍配置项，应该是大家最关注的地方，这里先以柱状图为例，后续如果有需要我继续出折线图，饼图，词云图等，其实配置大致类似）
我先上一个完整的options配置项代码，大家一遍参考代码一遍看解释。

1.     let option = {
   
2.                 tooltip: {
   
3.                     trigger: 'axis',
   
4.                     axisPointer: {
   
5.                         type: 'shadow'
   
6.                     }
   
7.                 },
   
8.                 // 图例设置
   
9.                 legend: {
   
10.                     data: ["群众监督员"],
    
11.                     icon: 'roundRect',  //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
    
12.                     top: 0,
    
13.                     right: "0%",
    
14.                     itemWidth: 20,
    
15.                     itemHeight: 10,
    
16.                     itemGap: 10,
    
17.                     textStyle: {
    
18.                         fontSize: 12,
    
19.                         color: "#554C3A",
    
20.                         letterSpacing: 1,
    
21.                         textAlign: 'center',
    
22.                         fontFamily: "也字工厂熬夜黑, cursive",
    
23.                         fontWeight: "bold",
    
24.                         padding: [0, 10, 0, 0],
    
25.                     },
    
26. 
    
27. 
    
28.                 },
    
29.                 grid: {
    
30.                     top: '15%',
    
31.                     left: '3%',
    
32.                     right: '4%',
    
33.                     bottom: '0%',
    
34.                     containLabel: true
    
35.                 },
    
36.                 xAxis: [
    
37.                     {
    
38.                         type: 'category',
    
39.                         data: ['湖北公司本部', '武汉市分公司', '黄石市分公司', '十堰市分公司', '宜昌市分公司', '襄阳市分公司', '鄂州市分公司', '荆门市分公司', '孝感市分公司', '荆州市分公司', '黄冈市分公司', '咸宁市分公司', '随州市分公司', '恩施土家族苗族自治州分公司', '仙桃市分公司', '潜江市分公司', '天门市分公司', '神农架林区', '省电信传输局'],
    
40.                         axisTick: {
    
41.                             alignWithLabel: true
    
42.                         },
    
43.                         axisLabel: {
    
44.                             rotate: 0 // 设置文字倾斜角度为45度
    
45.                         },
    
46.                         axisLine: {   // 设置X轴样式
    
47.                             lineStyle: {
    
48.                                 type: 'solid',
    
49.                                 color: '#000'
    
50.                             }
    
51.                         },
    
52.                         axisTick: {
    
53.                             show: false // 不显示坐标轴刻度线
    
54.                         },
    
55.                     }
    
56.                 ],
    
57.                 yAxis: [
    
58.                     {
    
59.                         type: 'value',
    
60.                         interval: 40,
    
61.                         splitLine: {
    
62.                             show: true,
    
63.                             lineStyle: {
    
64.                                 type: 'dashed', // 设置为虚线
    
65.                                 color: '#ccc' // 设置虚线的颜色
    
66.                             }
    
67.                         },
    
68.                         axisTick: {
    
69.                             show: false // 不显示坐标轴刻度线
    
70.                         },
    
71.                     },
    
72.                 ],
    
73. 
    
74.                 series: [
    
75.                     {
    
76.                         name: '群众监督员',
    
77.                         type: 'bar',
    
78.                         barWidth: '30%',
    
79.                         // data: [100, 150, 190, 50, 200, 50, 60, 30, 90, 120, 50, 50, 30, 70, 40, 50, 80, 80, 90,],
    
80.                         data: this.supervisor,
    
81.                         itemStyle: {
    
82.                             borderWidth: 2, // 设置圆圈的边框粗细为2像素
    
83.                             borderColor: '#ffa428', // 设置圆圈的边框颜色为蓝色
    
84.                             color: '#ffa428',//设置折线图粗细
    
85.                             normal: {
    
86.                                 color: function (params) {
    
87.                                     // 定义每个柱子的渐变色
    
88.                                     var colorList = [
    
89.                                         {
    
90.                                             offset: 0,
    
91.                                             color: '#fcc171'
    
92.                                         },
    
93.                                         {
    
94.                                             offset: 0.25,
    
95.                                             color: '#ec8347'
    
96.                                         },
    
97.                                         {
    
98.                                             offset: 0.5,
    
99.                                             color: '#e46432'
    
100.                                         },
     
101.                                         {
     
102.                                             offset: 0.75,
     
103.                                             color: '#e46432'
     
104.                                         },
     
105.                                         {
     
106.                                             offset: 1,
     
107.                                             color: '#e05126'
     
108.                                         }
     
109.                                     ];
     
110.                                     // params.dataIndex表示当前柱子的索引
     
111.                                     return {
     
112.                                         type: 'linear',
     
113.                                         x: 0,
     
114.                                         y: 0,
     
115.                                         x2: 0,
     
116.                                         y2: 1,
     
117.                                         colorStops: colorList
     
118.                                     };
     
119.                                 },
     
120.                                 barBorderRadius: [10, 10, 0, 0] // 柱子的四个角分别设置圆角半径
     
121.                             }
     
122.                         },
     
123.                         lineStyle: {
     
124.                             width: 3,//设置折线的粗细为2像素
     
125.                         },
     
126.                         label: {
     
127.                             show: true, // 显示标签
     
128.                             position: 'top',   // 标签位置
     
129.                             color: '#000'
     
130.                         },
     
131.                         color: {
     
132.                             type: 'linear',
     
133.                             x: 0,
     
134.                             y: 0,
     
135.                             x2: 1,
     
136.                             y2: 0,
     
137.                             colorStops: [
     
138.                                 {
     
139.                                     offset: 0,
     
140.                                     color: "#df5126"
     
141.                                 },
     
142.                                 {
     
143.                                     offset: 1,
     
144.                                     color: "#df5126"
     
145.                                 }
     
146.                             ]
     
147.                         },
     
148.                     }
     
149.                 ]
     
150.             };

复制代码

以下是我查阅官方文档手册为大家整理的，可能有遗漏可自行前往官方文档查阅补充。

1、tooltip：提示框配置，用于显示数据项的详细信息。设置了触发方式为坐标轴触发，显示阴影指示器。tooltip是指当你的鼠标移入到柱状图时，你想要给每个柱子的背景颜色，数据显示位置，是否显示等等，以下举几个常用例子，由于配置项实在是过多，我不可能一一配置，需要的时候就像查字典一样去查找即可。
（1）show:布尔值，默认开启为true，鼠标移入柱状图会有提示框显示数据项，手动关闭需要设置show为false。
（2）trigger：

1. tooltip

复制代码

中的

1. trigger

复制代码

属性用于设置触发提示框的条件，具体有以下几个可选参数，

1. <strong>1.item：鼠标悬停在数据项上时触发提示框。</strong>
   
2. <strong>2.axis：鼠标悬停在坐标轴上时触发提示框。</strong>
   
3. <strong>3.none：不触发提示框。</strong>

复制代码

（3）axisPointer：

1. axisPointer

复制代码

是

1. tooltip

复制代码

的子属性，用于配置提示框的指示器样式和行为。它可以设置以下几个参数：

1. [code]type

复制代码

：指示器类型，默认为

1. 'line'

复制代码

，表示直线型指示器。还可以设置为

1. 'shadow'

复制代码

，表示阴影指示器。

1. snap

复制代码

：是否自动吸附到最近的数据点，默认为

1. false

复制代码

。当设置为

1. true

复制代码

时，指示器会自动吸附到最近的数据点上。

1. z

复制代码

：指示器的层级，默认为

1. 100

复制代码

。当多个指示器同时存在时，通过调整层级可以控制显示的先后顺序。

1. label

复制代码

：提示框文本标签的样式设置，包括字体大小、颜色等。

1. lineStyle

复制代码

：指示器线条的样式设置，包括线宽、颜色等。[/code]（4） showContent：

1. showContent

复制代码

是

1. tooltip

复制代码

的子属性之一，用于配置提示框中内容的显示与隐藏。具体可设置的参数为布尔值，默认为

1. true。

复制代码

当

1. showContent

复制代码

为

1. true

复制代码

时，提示框会显示数据项的详细内容。当

1. showContent

复制代码

为

1. false

复制代码

时，提示框不会显示数据项的详细内容，仅显示指示器和标题。
（5） transitionDuration：

1. transitionDuration

复制代码

是ECharts中的一个配置项，用于设置图表动画的过渡时间。它表示图表从一个状态过渡到另一个状态所花费的时间，单位为毫秒（ms）。通过设置

1. transitionDuration

复制代码

，你可以调整图表的动画效果的持续时间。较短的过渡时间可以使动画更加迅速，而较长的过渡时间可以使动画变得平滑。根据实际需求，你可以根据这个参数来控制图表动画的速度和流畅度。
（6）formatter：

1. formatter

复制代码

是ECharts中

1. tooltip

复制代码

的一个子属性，用于格式化提示框的内容。它可以是一个函数或者字符串。
当

1. formatter

复制代码

为函数时，它会接收两个参数：

1. params

复制代码

和

1. ticket

复制代码

。其中，

1. params

复制代码

是一个数组，包含了当前鼠标所指示的数据项的详细信息；

1. ticket

复制代码

是异步回调标识，用于告知 ECharts 异步数据已经加载完成。
当

1. formatter

复制代码

为字符串时，它可以使用占位符来引用数据项的字段，如

1. {a}

复制代码

表示系列名，

1. {b}

复制代码

表示类目名，

1. {c}

复制代码

表示数据值等。
通过设置

1. tooltip.formatter

复制代码

，你可以自定义提示框的内容展示方式，以满足特定的可视化需求。例如，你可以将提示框的内容设置为一个表格，显示更加详细的数据信息，或者根据业务需求对提示框的内容进行定制化。下面是一个例子：

1. tooltip: {
   
2.   formatter: function (params) {
   
3.     var result = '';
   
4.     for (var i = 0; i < params.length; i++) {
   
5.       result += params[i].seriesName + '：' + params[i].value + '<br/>';
   
6.     }
   
7.     return result;
   
8.   }
   
9. }

复制代码

2、legend：legend是ECharts中的配置项之一，用于配置图例（Legend）。图例用于展示不同系列（Series）在图表中的标识和说明，方便用户理解并区分不同的数据系列。

1. legend

复制代码

可以配置以下参数：

1. [code]show

复制代码

：是否显示图例，默认为

1. true

复制代码

。

1. type

复制代码

：图例的类型，默认为

1. 'plain'

复制代码

，表示普通图例。还可以设置为

1. 'scroll'

复制代码

，表示可滚动的图例。

1. left

复制代码

、

1. top

复制代码

、

1. right

复制代码

、

1. bottom

复制代码

：图例组件离容器边界的距离。

1. width

复制代码

、

1. height

复制代码

：图例组件的宽度和高度。

1. orient

复制代码

：图例的布局方向，默认为

1. 'horizontal'

复制代码

，表示水平布局。还可以设置为

1. 'vertical'

复制代码

，表示垂直布局。

1. align

复制代码

：图例的对齐方式，默认为

1. 'auto'

复制代码

，表示自动对齐。还可以设置为

1. 'left'

复制代码

、

1. 'right'

复制代码

、

1. 'center'

复制代码

，分别表示左对齐、右对齐、居中对齐。

1. padding

复制代码

：图例内边距，用于调整图例内容与边框的距离。

1. itemGap

复制代码

：图例每项之间的间隔距离。

1. itemWidth

复制代码

、

1. itemHeight

复制代码

：图例每项的宽度和高度。

1. textStyle

复制代码

：图例文本的样式设置，包括字体大小、颜色等。[/code]通过配置

1. legend

复制代码

，你可以控制图例的显示与隐藏，以及调整图例的布局、样式等。根据具体需求，你可以根据这些参数进行定制化配置来满足自己的可视化要求。

1.    // 图例设置
   
2.                 legend: {
   
3.                     data: ["群众监督员"],
   
4.                     icon: 'roundRect',  //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
   
5.                     top: 0,
   
6.                     right: "0%",
   
7.                     itemWidth: 20,
   
8.                     itemHeight: 10,
   
9.                     itemGap: 10,
   
10.                     textStyle: {
    
11.                         fontSize: 12,
    
12.                         color: "#554C3A",
    
13.                         letterSpacing: 1,
    
14.                         textAlign: 'center',
    
15.                         fontFamily: "也字工厂熬夜黑, cursive",
    
16.                         fontWeight: "bold",
    
17.                         padding: [0, 10, 0, 0],
    
18.                     },
    
19. 
    
20. 
    
21.                 },

复制代码

3、grid：

1. grid

复制代码

是 ECharts 中的配置项之一，用于配置网格（Grid）。网格是图表中的坐标系，用于布局和定位图表中的各个组件。

1. grid

复制代码

可以配置以下参数：

1. [code]show

复制代码

：是否显示网格，默认为

1. false

复制代码

。

1. left

复制代码

、

1. top

复制代码

、

1. right

复制代码

、

1. bottom

复制代码

：网格组件离容器边界的距离。

1. width

复制代码

、

1. height

复制代码

：网格组件的宽度和高度。

1. containLabel

复制代码

：是否包含坐标轴的刻度标签，默认为

1. false

复制代码

。如果设置为

1. true

复制代码

，则网格区域将包括坐标轴的刻度标签，否则不包括。

1. backgroundColor

复制代码

：网格的背景颜色。

1. borderColor

复制代码

：网格的边框颜色。

1. borderWidth

复制代码

：网格的边框宽度。

1. zlevel

复制代码

：组件的层级，控制绘制顺序。[/code]通过配置

1. grid

复制代码

，你可以调整网格的位置、大小和样式。网格的作用是提供一个基准坐标系，用于放置和对齐其他图表组件，例如坐标轴、数据系列等。根据具体需求，你可以根据这些参数进行定制化配置来满足自己的可视化要求。

1.            grid: {
   
2.                     top: '15%',
   
3.                     left: '3%',
   
4.                     right: '4%',
   
5.                     bottom: '0%',
   
6.                     containLabel: true
   
7.                 },

复制代码

4、backgroundColor：

1. backgroundColor

复制代码

是 ECharts 中的配置项之一，用于设置图表的背景颜色。
通过配置

1. backgroundColor

复制代码

，你可以为整个图表设置一个背景色。这对于美化图表、增强可读性或与页面的整体风格相匹配非常有用。
例如，你可以将

1. backgroundColor

复制代码

设置为

1. "#f5f5f5"

复制代码

来给图表添加一个灰色的背景，或者将其设置为

1. "transparent"

复制代码

来使背景透明。
这个配置项可以接受各种 CSS 颜色值，包括十六进制值、RGB、RGBA、颜色名等。注意，

1. backgroundColor

复制代码

仅为整个图表的背景颜色，不包括坐标轴、数据系列等组件的背景色。如果你需要设置其他组件的背景色，可以通过其他相关配置项进行设置，例

1. axisLabel.backgroundColor

复制代码

、

1. tooltip.backgroundColor

复制代码

等。
5、borderWidth：

1. borderWidth

复制代码

是 ECharts 中的配置项之一，用于设置图表组件的边框宽度。
通过配置

1. borderWidth

复制代码

，你可以为图表组件（例如网格、坐标轴、图例等）设置边框的宽度，以增加图表的可视效果和边界清晰度。
这个配置项可以接受一个数字值，表示边框的宽度，单位为像素。例如，

1. borderWidth: 1

复制代码

表示边框宽度为 1 像素。
你可以在不同的组件上使用

1. borderWidth

复制代码

进行边框的设置，如网格的边框、坐标轴的边框、图例的边框等。通过调整边框宽度，你可以改变组件的边界线的粗细，从而影响整体的视觉效果。
6、xAxis：

1. xAxis

复制代码

是 ECharts 中的配置项之一，用于设置图表的 X 轴。

1. xAxis

复制代码

可以配置以下参数：

1. [code]type

复制代码

：坐标轴类型，包括

1. 'value'

复制代码

、

1. 'category'

复制代码

、

1. 'time'

复制代码

、

1. 'log'

复制代码

四个选项，默认为

1. 'category'

复制代码

。

1. name

复制代码

：坐标轴名称。

1. nameTextStyle

复制代码

：坐标轴名称的文本样式。

1. axisLabel

复制代码

：坐标轴刻度标签的文本样式和其他设置。

1. axisTick

复制代码

：坐标轴刻度线的样式和其他设置。

1. axisLine

复制代码

：坐标轴线的样式和其他设置。

1. boundaryGap

复制代码

：是否在数据两侧留白，默认为

1. true

复制代码

。如果设置为

1. false

复制代码

，则刻度线和数据点将会在坐标轴两端对齐。

1. data

复制代码

：类目型坐标轴的刻度标签内容。

1. min

复制代码

、

1. max

复制代码

：数值型坐标轴的最小值和最大值。

1. splitNumber

复制代码

：分割段数，用于控制刻度线的数量。

1. interval

复制代码

：刻度间隔，用于控制刻度线的跨度。

1. axisPointer

复制代码

：坐标轴指示器的样式和其他设置。[/code] 以上参数可以根据实际需求进行灵活的配置，比如可以通过

1. type

复制代码

参数将坐标轴类型设置为

1. 'value'

复制代码

，然后配置

1. min

复制代码

和

1. max

复制代码

来控制数值型坐标轴的范围；或者通过

1. data

复制代码

参数将坐标轴类型设置为

1. 'category'

复制代码

，然后配置类目型 X 轴的刻度标签内容。

1.   xAxis: [
   
2.                     {
   
3.                         type: 'category',
   
4.                         data: ['湖北公司本部', '武汉市分公司', '黄石市分公司', '十堰市分公司', '宜昌市分公司', '襄阳市分公司', '鄂州市分公司', '荆门市分公司', '孝感市分公司', '荆州市分公司', '黄冈市分公司', '咸宁市分公司', '随州市分公司', '恩施土家族苗族自治州分公司', '仙桃市分公司', '潜江市分公司', '天门市分公司', '神农架林区', '省电信传输局'],
   
5.                         axisTick: {
   
6.                             alignWithLabel: true
   
7.                         },
   
8.                         axisLabel: {
   
9.                             rotate: 0 // 设置文字倾斜角度为45度
   
10.                         },
    
11.                         axisLine: {   // 设置X轴样式
    
12.                             lineStyle: {
    
13.                                 type: 'solid',
    
14.                                 color: '#000'
    
15.                             }
    
16.                         },
    
17.                         axisTick: {
    
18.                             show: false // 不显示坐标轴刻度线
    
19.                         },
    
20.                     }
    
21.                 ],

复制代码

7、yAxis：

1. yAxis

复制代码

是 ECharts 中的配置项之一，用于设置图表的 Y 轴。通过配置

1. yAxis

复制代码

，你可以对 Y 轴的样式、刻度、标签等进行设置，以适应不同的数据和可视化需求。

1. yAxis

复制代码

可以配置以下参数：

1. [code]type

复制代码

：坐标轴类型，包括

1. 'value'

复制代码

、

1. 'category'

复制代码

、

1. 'time'

复制代码

、

1. 'log'

复制代码

四个选项，默认为

1. 'value'

复制代码

。

1. name

复制代码

：坐标轴名称。

1. nameTextStyle

复制代码

：坐标轴名称的文本样式。

1. axisLabel

复制代码

：坐标轴刻度标签的文本样式和其他设置。

1. axisTick

复制代码

：坐标轴刻度线的样式和其他设置。

1. axisLine

复制代码

：坐标轴线的样式和其他设置。

1. boundaryGap

复制代码

：是否在数据两侧留白，默认为

1. true

复制代码

。如果设置为

1. false

复制代码

，则刻度线和数据点将会在坐标轴两端对齐。

1. data

复制代码

：类目型坐标轴的刻度标签内容。

1. min

复制代码

、

1. max

复制代码

：数值型坐标轴的最小值和最大值。

1. splitNumber

复制代码

：分割段数，用于控制刻度线的数量。

1. interval

复制代码

：刻度间隔，用于控制刻度线的跨度。

1. axisPointer

复制代码

：坐标轴指示器的样式和其他设置。[/code]

1. yAxis: [
   
2.                     {
   
3.                         type: 'value',
   
4.                         interval: 40,
   
5.                         splitLine: {
   
6.                             show: true,
   
7.                             lineStyle: {
   
8.                                 type: 'dashed', // 设置为虚线
   
9.                                 color: '#ccc' // 设置虚线的颜色
   
10.                             }
    
11.                         },
    
12.                         axisTick: {
    
13.                             show: false // 不显示坐标轴刻度线
    
14.                         },
    
15.                     },
    
16.                 ],

复制代码

8、series:通过配置

1. series

复制代码

，你可以定义图表中的各个系列，包括折线图、柱状图、饼图等不同类型的图表。

1. series

复制代码

可以配置以下参数：

1. [code]type

复制代码

：系列类型，包括

1. 'line'

复制代码

、

1. 'bar'

复制代码

、

1. 'pie'

复制代码

等多种类型，默认为

1. 'line'

复制代码

。

1. name

复制代码

：系列名称。

1. data

复制代码

：系列数据，具体格式根据不同的系列类型而定。

1. smooth

复制代码

：是否平滑显示折线图，默认为

1. false

复制代码

。

1. stack

复制代码

：是否堆叠显示柱状图，默认为

1. false

复制代码

。

1. label

复制代码

：标签相关的设置，用于显示数据标签。

1. itemStyle

复制代码

：图形样式的设置，包括颜色、边框等。

1. areaStyle

复制代码

：填充区域的样式设置，仅在折线图中有效。

1. radius

复制代码

：饼图的半径设置。

1. center

复制代码

：饼图的中心位置设置。

1. roseType

复制代码

：是否展示为南丁格尔图（玫瑰图），仅在饼图中有效。

1. animation

复制代码

：动画效果的设置，包括动画类型、延迟等。[/code]以上参数只是部分常用的配置，具体的细节和其他可配置项可以根据不同的系列类型而定。不同的图表类型可能有特定的配置项，比如折线图可以配置平滑显示、堆叠显示等，柱状图可以配置堆叠显示，饼图可以配置半径、南丁格尔图等。
需要注意的是，

1. series

复制代码

是一个数组，可以包含多个系列对象，用于在同一个图表中显示多个数据系列。

1.    series: [
   
2.                     {
   
3.                         name: '群众监督员',
   
4.                         type: 'bar',
   
5.                         barWidth: '30%',
   
6.                         // data: [100, 150, 190, 50, 200, 50, 60, 30, 90, 120, 50, 50, 30, 70, 40, 50, 80, 80, 90,],
   
7.                         data: this.supervisor,
   
8.                         itemStyle: {
   
9.                             borderWidth: 2, // 设置圆圈的边框粗细为2像素
   
10.                             borderColor: '#ffa428', // 设置圆圈的边框颜色为蓝色
    
11.                             color: '#ffa428',//设置折线图粗细
    
12.                             normal: {
    
13.                                 color: function (params) {
    
14.                                     // 定义每个柱子的渐变色
    
15.                                     var colorList = [
    
16.                                         {
    
17.                                             offset: 0,
    
18.                                             color: '#fcc171'
    
19.                                         },
    
20.                                         {
    
21.                                             offset: 0.25,
    
22.                                             color: '#ec8347'
    
23.                                         },
    
24.                                         {
    
25.                                             offset: 0.5,
    
26.                                             color: '#e46432'
    
27.                                         },
    
28.                                         {
    
29.                                             offset: 0.75,
    
30.                                             color: '#e46432'
    
31.                                         },
    
32.                                         {
    
33.                                             offset: 1,
    
34.                                             color: '#e05126'
    
35.                                         }
    
36.                                     ];
    
37.                                     // params.dataIndex表示当前柱子的索引
    
38.                                     return {
    
39.                                         type: 'linear',
    
40.                                         x: 0,
    
41.                                         y: 0,
    
42.                                         x2: 0,
    
43.                                         y2: 1,
    
44.                                         colorStops: colorList
    
45.                                     };
    
46.                                 },
    
47.                                 barBorderRadius: [10, 10, 0, 0] // 柱子的四个角分别设置圆角半径
    
48.                             }
    
49.                         },
    
50.                         lineStyle: {
    
51.                             width: 3,//设置折线的粗细为2像素
    
52.                         },
    
53.                         label: {
    
54.                             show: true, // 显示标签
    
55.                             position: 'top',   // 标签位置
    
56.                             color: '#000'
    
57.                         },
    
58.                         color: {
    
59.                             type: 'linear',
    
60.                             x: 0,
    
61.                             y: 0,
    
62.                             x2: 1,
    
63.                             y2: 0,
    
64.                             colorStops: [
    
65.                                 {
    
66.                                     offset: 0,
    
67.                                     color: "#df5126"
    
68.                                 },
    
69.                                 {
    
70.                                     offset: 1,
    
71.                                     color: "#df5126"
    
72.                                 }
    
73.                             ]
    
74.                         },
    
75.                     }
    
76.                 ]

复制代码

以上就是我给大家整理的关于配置项的部分内容了，其它没有的可自行官网查阅。
图表重绘：我们还需要考虑到图表重绘的问题
第一种情况：
当用户最小化窗口或拖动窗口改变窗口大小时，我们可以监听浏览器窗口的

1. resize

复制代码

事件，并在事件回调函数中调用图表对象的

1. resize

复制代码

方法来实现图表的重绘。
具体实现代码如下：

1. // 第一种情况监听浏览器窗口的变化 让图表重绘
   
2.             window.addEventListener("resize", () => {
   
3.                 this.chart.resize();
   
4.             });

复制代码

第二种情况：
用户不改变窗口大小但会在图表所在的 DOM 元素内部改变大小。我们可以使用

1. ResizeObserver

复制代码

实例来监听页面中指定 DOM 元素的宽度变化，并在回调函数中执行图表的重绘操作。
首先安装resize-observer-polyfill插件

1. npm install resize-observer-polyfill

复制代码

项目中引入

1. import ResizeObserver from 'resize-observer-polyfill';

复制代码

1.    // 在图表初始化时，创建 Resize Observer 实例  第二种情况 监听页面中DOM元素的宽度变化让图表重绘
   
2.             const resizeObserver = new ResizeObserver(entries => {
   
3.                 entries.forEach((entry => {
   
4.                     // entry.target 是被观察的DOM元素
   
5.                     // 在这里执行图表重绘的操作
   
6.                     this.chart.resize()
   
7.                 }))
   
8.             })
   
9. 
   
10.             // 将 Resize Observer 绑定到图表的 DOM 元素上
    
11.             const chartContainer = document.getElementById('center-bottom')
    
12.             resizeObserver.observe(chartContainer)

复制代码

注：下面是完整代码：仅供参考

1. <template>    <div class="center-wrap">        <div class="headTitle">            <img class="my-img" :src="require('../../../assets/images/大屏/homeScreen_04.png')" alt="" />            <span class="title">各地市群众监督员统计情况</span>        </div>        <div id="center-bottom" class="center-bottom">        </div>    </div></template><script>import echartMixins from "@/utils/resizeMixins";import { supervisor } from '@/api/bigScreen/screen'import ResizeObserver from 'resize-observer-polyfill';export default {    data() {        return {            chart: null,            supervisor: null        }    },    mixins: [echartMixins],    mounted() {        this.draw()    },    methods: {        async draw() {            this.chart = this.$echarts.init(document.getElementById("center-bottom"));            // 获取各地市下的监督员数量            let res = await supervisor()            this.supervisor = res.data.map((item) => {                return item.count            })            let option = {                tooltip: {                    trigger: 'axis',                    axisPointer: {                        type: 'shadow'                    },                    show: false                },                // 图例设置
   
2.                 legend: {
   
3.                     data: ["群众监督员"],
   
4.                     icon: 'roundRect',  //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
   
5.                     top: 0,
   
6.                     right: "0%",
   
7.                     itemWidth: 20,
   
8.                     itemHeight: 10,
   
9.                     itemGap: 10,
   
10.                     textStyle: {
    
11.                         fontSize: 12,
    
12.                         color: "#554C3A",
    
13.                         letterSpacing: 1,
    
14.                         textAlign: 'center',
    
15.                         fontFamily: "也字工厂熬夜黑, cursive",
    
16.                         fontWeight: "bold",
    
17.                         padding: [0, 10, 0, 0],
    
18.                     },
    
19. 
    
20. 
    
21.                 },                grid: {
    
22.                     top: '15%',
    
23.                     left: '3%',
    
24.                     right: '4%',
    
25.                     bottom: '0%',
    
26.                     containLabel: true
    
27.                 },                xAxis: [
    
28.                     {
    
29.                         type: 'category',
    
30.                         data: ['湖北公司本部', '武汉市分公司', '黄石市分公司', '十堰市分公司', '宜昌市分公司', '襄阳市分公司', '鄂州市分公司', '荆门市分公司', '孝感市分公司', '荆州市分公司', '黄冈市分公司', '咸宁市分公司', '随州市分公司', '恩施土家族苗族自治州分公司', '仙桃市分公司', '潜江市分公司', '天门市分公司', '神农架林区', '省电信传输局'],
    
31.                         axisTick: {
    
32.                             alignWithLabel: true
    
33.                         },
    
34.                         axisLabel: {
    
35.                             rotate: 0 // 设置文字倾斜角度为45度
    
36.                         },
    
37.                         axisLine: {   // 设置X轴样式
    
38.                             lineStyle: {
    
39.                                 type: 'solid',
    
40.                                 color: '#000'
    
41.                             }
    
42.                         },
    
43.                         axisTick: {
    
44.                             show: false // 不显示坐标轴刻度线
    
45.                         },
    
46.                     }
    
47.                 ],                yAxis: [
    
48.                     {
    
49.                         type: 'value',
    
50.                         interval: 40,
    
51.                         splitLine: {
    
52.                             show: true,
    
53.                             lineStyle: {
    
54.                                 type: 'dashed', // 设置为虚线
    
55.                                 color: '#ccc' // 设置虚线的颜色
    
56.                             }
    
57.                         },
    
58.                         axisTick: {
    
59.                             show: false // 不显示坐标轴刻度线
    
60.                         },
    
61.                     },
    
62.                 ],                series: [
    
63.                     {
    
64.                         name: '群众监督员',
    
65.                         type: 'bar',
    
66.                         barWidth: '30%',
    
67.                         // data: [100, 150, 190, 50, 200, 50, 60, 30, 90, 120, 50, 50, 30, 70, 40, 50, 80, 80, 90,],
    
68.                         data: this.supervisor,
    
69.                         itemStyle: {
    
70.                             borderWidth: 2, // 设置圆圈的边框粗细为2像素
    
71.                             borderColor: '#ffa428', // 设置圆圈的边框颜色为蓝色
    
72.                             color: '#ffa428',//设置折线图粗细
    
73.                             normal: {
    
74.                                 color: function (params) {
    
75.                                     // 定义每个柱子的渐变色
    
76.                                     var colorList = [
    
77.                                         {
    
78.                                             offset: 0,
    
79.                                             color: '#fcc171'
    
80.                                         },
    
81.                                         {
    
82.                                             offset: 0.25,
    
83.                                             color: '#ec8347'
    
84.                                         },
    
85.                                         {
    
86.                                             offset: 0.5,
    
87.                                             color: '#e46432'
    
88.                                         },
    
89.                                         {
    
90.                                             offset: 0.75,
    
91.                                             color: '#e46432'
    
92.                                         },
    
93.                                         {
    
94.                                             offset: 1,
    
95.                                             color: '#e05126'
    
96.                                         }
    
97.                                     ];
    
98.                                     // params.dataIndex表示当前柱子的索引
    
99.                                     return {
    
100.                                         type: 'linear',
     
101.                                         x: 0,
     
102.                                         y: 0,
     
103.                                         x2: 0,
     
104.                                         y2: 1,
     
105.                                         colorStops: colorList
     
106.                                     };
     
107.                                 },
     
108.                                 barBorderRadius: [10, 10, 0, 0] // 柱子的四个角分别设置圆角半径
     
109.                             }
     
110.                         },
     
111.                         lineStyle: {
     
112.                             width: 3,//设置折线的粗细为2像素
     
113.                         },
     
114.                         label: {
     
115.                             show: true, // 显示标签
     
116.                             position: 'top',   // 标签位置
     
117.                             color: '#000'
     
118.                         },
     
119.                         color: {
     
120.                             type: 'linear',
     
121.                             x: 0,
     
122.                             y: 0,
     
123.                             x2: 1,
     
124.                             y2: 0,
     
125.                             colorStops: [
     
126.                                 {
     
127.                                     offset: 0,
     
128.                                     color: "#df5126"
     
129.                                 },
     
130.                                 {
     
131.                                     offset: 1,
     
132.                                     color: "#df5126"
     
133.                                 }
     
134.                             ]
     
135.                         },
     
136.                     }
     
137.                 ]            };            this.chart.setOption(option);            // 第一种情况监听浏览器窗口的变化 让图表重绘
     
138.             window.addEventListener("resize", () => {
     
139.                 this.chart.resize();
     
140.             });            // 在图表初始化时，创建 Resize Observer 实例  第二种情况 监听页面中DOM元素的宽度变化让图表重绘
     
141.             const resizeObserver = new ResizeObserver(entries => {
     
142.                 entries.forEach((entry => {
     
143.                     // entry.target 是被观察的DOM元素
     
144.                     // 在这里执行图表重绘的操作
     
145.                     this.chart.resize()
     
146.                 }))
     
147.             })
     
148. 
     
149.             // 将 Resize Observer 绑定到图表的 DOM 元素上
     
150.             const chartContainer = document.getElementById('center-bottom')
     
151.             resizeObserver.observe(chartContainer)        }    },    destroyed() {        window.onresize = null;    },}</script><style  scoped lang="scss">.center-wrap {    width: 100%;    height: 100%;    .headTitle {        height: 30px;        width: 100%;        margin-top: 1px;        display: flex;        justify-content: flex-start;        align-content: center;        border-top-left-radius: 10px;        border-top-right-radius: 10px;        background: url(../../../assets/images/大屏/homeScreen_01.png) no-repeat center center;        background-size: cover;        .my-img {            width: 20px;            height: 20px;            margin: 4px 10px 0 22px;        }        .title {            height: 30px;            font-size: 16px;            color: #554C3A;            line-height: 32px;            letter-spacing: 1px;            text-align: center;            font-family: "也字工厂熬夜黑", cursive;            font-weight: bold;            margin: 0;        }    }    .center-bottom {
     
152.         width: 100%;
     
153.         height: calc(100% - 36px);
     
154.     }}</style>

复制代码

总结：绘制一个完整的图表需要

1. 1.安装 Echarts
   
2. 2.准备数据
   
3. 3.创建容器
   
4. 4.设置容器样式
   
5. 5.初始化图表实例
   
6. 6.配置图表选项
   
7. 7.渲染图表
   
8. 8.监听事件
   
9. 9.更新图表
   
10. 10.销毁图表 
    
11. 值得注意的是，在创建容器的时候一定要给容器设置宽高，否则无法正常显示，并且要考虑图表重绘的问题，防止样式错位。

复制代码

到此这篇关于Echarts+VUE柱状图绘制细节并且屏幕自适应的文章就介绍到这了,更多相关Echarts+VUE柱状图绘制内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/316238zdz.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！