常用echarts展示

案例一：（双坐标，双柱图）

 代码及注释：

1.  
   this.chartOption = {
2.  
   legend: {
3.  
   itemHeight: 6, // 图例的高度
4.  
   itemWidth: 16, // 图例的宽度
5.  
   x: "center", //居右显示
6.  
   inactiveColor: "rgba(0,0,0,0.3)", // 图例关闭后的颜色
7.  
   textStyle: {
8.  
   fontSize: 12,
9.  
   color: "#0B9295", // 图例的文字颜色
10.  
    padding: [3, 0, 0, 0],
11.  
    },
12.  
    data: ["老人数", "预警数"],
13.  
    },
14.  
    tooltip: {
15.  
    trigger: "axis",
16.  
    axisPointer: {
17.  
    type: "shadow"
18.  
    }
19.  
    },
20.  
    grid: {
21.  
    left: "0%",
22.  
    right: "0%",
23.  
    bottom: "3%",
24.  
    containLabel: true
25.  
    },
26.  
    xAxis: {
27.  
    type: "category",
28.  
    // data: yearList,
29.  
    data:[
30.  
    "市区", "高邮市", "仪征市", "江都区", "宝应县"
31.  
    ],
32.  
    splitLine: {//分割线配置
33.  
    show: false
34.  
    },
35.  
    axisLabel: { // x轴线文字的样式
36.  
    textStyle: {
37.  
    color: "#B4FFF5",
38.  
    fontSize: 12
39.  
    },
40.  
    },
41.  
    axisTick: {
42.  
    show: false
43.  
    },
44.  
    axisLine: {//x轴线的颜色以及宽度
45.  
    show: true,
46.  
    lineStyle: {
47.  
    color: "#3AB2B4",
48.  
    type: "solid",
49.  
    width: 1
50.  
    }
51.  
    }
52.  
    },
53.  
    yAxis: [
54.  
    {
55.  
    type: "value",
56.  
    name:"老人数",
57.  
    nameTextStyle:{ // name的样式
58.  
    color:"#0B9295"
59.  
    },
60.  
    splitLine: {//分割线配置
61.  
    show: false,
62.  
    lineStyle: {
63.  
    color: "#3AB2B4",
64.  
    type: "solid",
65.  
    width: 0
66.  
    }
67.  
    },
68.  
    axisTick: { // 取消刻度线上的小刻度
69.  
    show: false
70.  
    },
71.  
    axisLine:{ // 取消整个刻度线
72.  
    show:false
73.  
    },
74.  
    axisLabel: { // y轴的文字样式
75.  
    textStyle: {
76.  
    color: "#B4FFF5"
77.  
    },
78.  
    }
79.  
     
80.  
    },
81.  
    {
82.  
    type: "value",
83.  
    name:"预警数",
84.  
    nameTextStyle:{
85.  
    color:"#0B9295"
86.  
    },
87.  
    position:"right",
88.  
    splitLine: {//分割线配置
89.  
    show: false,
90.  
    lineStyle: {
91.  
    color: "rgba(0, 112, 107, 0.1)"
92.  
    }
93.  
    },
94.  
    axisTick: { // 取消刻度线上的小刻度
95.  
    show: false
96.  
    },
97.  
    axisLine:{ // 取消整个刻度线
98.  
    show:false
99.  
    },
100.  
     axisLabel: {
101.  
     show:true,
102.  
     textStyle: {
103.  
     color: "#B4FFF5"
104.  
     },
105.  
     }
106.  
     },
107.  
     {
108.  
     type: "value",
109.  
     gridIndex: 0,
110.  
     min: 50,
111.  
     max: 100,
112.  
     splitNumber: 8,
113.  
     splitLine: {
114.  
     show: false,
115.  
     color: ["#ccc"], // 分隔线颜色。
116.  
     width: 1, // 分隔线线宽
117.  
     type: "dashed", // 线的类型
118.  
     opacity: 1 // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
119.  
     },
120.  
     axisLine: {
121.  
     show: false
122.  
     },
123.  
     axisTick: {
124.  
     show: false
125.  
     },
126.  
     axisLabel: {
127.  
     show: false
128.  
     },
129.  
     splitArea: {
130.  
     show: true,
131.  
     areaStyle: {
132.  
     color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
133.  
     }
134.  
     }
135.  
     }
136.  
      
137.  
     ],
138.  
     series: [
139.  
     {
140.  
     name: "老人数",
141.  
     type: "bar",
142.  
     color: "#4FE2CF",
143.  
     nameStyle:{
144.  
     width:100
145.  
     },
146.  
     yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
147.  
     barWidth:"14px", // 柱子的宽度
148.  
     itemStyle: {
149.  
     normal: {
150.  
      
151.  
     barBorderRadius: [2, 2, 2, 2],
152.  
     lineStyle: {
153.  
     width: 3
154.  
     }
155.  
     }
156.  
     },
157.  
     data:[
158.  
     "12",
159.  
     "2",
160.  
     "3",
161.  
     "2",
162.  
     "45",
163.  
     ]
164.  
     },
165.  
     {
166.  
     name: "预警数",
167.  
     type: "bar",
168.  
     color: "#FF9F48",
169.  
     barWidth:"14px", // 柱子的宽度
170.  
     yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
171.  
     showAllSymbol: true, //显示所有图形。
172.  
     itemStyle: {
173.  
     normal: {
174.  
      
175.  
     barBorderRadius: [2, 2, 2, 2],
176.  
     lineStyle: {
177.  
     width: 3
178.  
     }
179.  
     }
180.  
     },
181.  
     data:[
182.  
     "123",
183.  
     "34",
184.  
     "56",
185.  
     "23",
186.  
     "566",
187.  
     ]
188.  
     },
189.  
      
190.  
      
191.  
     ]
192.  
     };

案例二：（堆叠柱图 折线图）

 代码及注释：

1.  
   this.chartOption = {
2.  
   legend: {
3.  
   itemHeight: 6,
4.  
   itemWidth: 16,
5.  
   x: "center", //居右显示
6.  
   inactiveColor: "rgba(0,0,0,0.3)",// 图例关闭后的颜色
7.  
   textStyle: {
8.  
   fontSize: 12,
9.  
   color: "#0B9295", // 图例的文字颜色
10.  
    padding: [3, 0, 0, 0],
11.  
    },
12.  
    data: ["处理数", "预警数", "处理率"],
13.  
    },
14.  
    tooltip: {
15.  
    trigger: "axis",
16.  
    axisPointer: { // 鼠标移上去时,触发后的样式
17.  
    type: "shadow"
18.  
    }
19.  
    },
20.  
    grid: {
21.  
    left: "3.5%",
22.  
    right: "0%",
23.  
    bottom: "3%",
24.  
    containLabel: true
25.  
    },
26.  
    xAxis: {
27.  
    type: "category",
28.  
    // data: yearList,
29.  
    data:[
30.  
    "市区", "高邮市", "仪征市", "江都区", "宝应县"
31.  
    ],
32.  
    splitLine: {//分割线配置
33.  
    show: false
34.  
    },
35.  
    axisLabel: { // x轴线文字的样式
36.  
    textStyle: {
37.  
    color: "#B4FFF5",
38.  
    fontSize: 12
39.  
    },
40.  
    },
41.  
    axisTick: {
42.  
    show: false
43.  
    },
44.  
    axisLine: {//x轴线的颜色以及宽度
45.  
    show: true,
46.  
    lineStyle: {
47.  
    color: "#3AB2B4",
48.  
    type: "solid",
49.  
    width: 1
50.  
    }
51.  
    }
52.  
    },
53.  
    yAxis: [
54.  
    {
55.  
    type: "value",
56.  
    name:"预警数/处理数",
57.  
    nameTextStyle:{ // name的样式
58.  
    color:"#0B9295"
59.  
    },
60.  
    splitLine: {//分割线配置
61.  
    show: false,
62.  
    lineStyle: {
63.  
    color: "#3AB2B4",
64.  
    type: "solid",
65.  
    width: 0
66.  
    }
67.  
    },
68.  
    axisTick: { // 取消刻度线上的小刻度
69.  
    show: false
70.  
    },
71.  
    axisLine:{ // 取消整个刻度线
72.  
    show:false
73.  
    },
74.  
    axisLabel: { // y轴的文字样式
75.  
    textStyle: {
76.  
    color: "#B4FFF5"
77.  
    },
78.  
    }
79.  
    },
80.  
    {
81.  
    type: "value",
82.  
    name:"处理率",
83.  
    nameTextStyle:{
84.  
    color:"#0B9295"
85.  
    },
86.  
    position:"right",
87.  
    splitLine: {//分割线配置
88.  
    show: false,
89.  
    lineStyle: {
90.  
    color: "rgba(0, 112, 107, 0.1)"
91.  
    }
92.  
    },
93.  
    axisTick: { // 取消刻度线上的小刻度
94.  
    show: false
95.  
    },
96.  
    axisLine:{ // 取消整个刻度线
97.  
    show:false
98.  
    },
99.  
    axisLabel: {
100.  
     show:true,
101.  
     textStyle: {
102.  
     color: "#B4FFF5"
103.  
     },
104.  
     }
105.  
     },
106.  
     {
107.  
     type: "value",
108.  
     gridIndex: 0,
109.  
     min: 50,
110.  
     max: 100,
111.  
     splitNumber: 8,
112.  
     splitLine: {
113.  
     show: false
114.  
     },
115.  
     axisLine: {
116.  
     show: false
117.  
     },
118.  
     axisTick: {
119.  
     show: false
120.  
     },
121.  
     axisLabel: {
122.  
     show: false
123.  
     },
124.  
     splitArea: {
125.  
     show: true,
126.  
     areaStyle: {
127.  
     color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
128.  
     }
129.  
     }
130.  
     }
131.  
      
132.  
     ],
133.  
     series: [
134.  
     {
135.  
     name: "处理数",
136.  
     type: "bar",
137.  
     color: "#4FE2CF",
138.  
     // stack设置柱状图堆叠,stack后面要跟同样的名字
139.  
     stack:"Search Engine",
140.  
     nameStyle:{
141.  
     width:100
142.  
     },
143.  
     yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
144.  
     barWidth:"14px", // 柱子的宽度
145.  
     itemStyle: {
146.  
     normal: {
147.  
      
148.  
     lineStyle: {
149.  
     width: 3
150.  
     }
151.  
     }
152.  
     },
153.  
     data:[
154.  
     "12",
155.  
     "2",
156.  
     "3",
157.  
     "2",
158.  
     "45",
159.  
     ]
160.  
     },
161.  
     // yAxisIndex: 0, 因为处理数和预警数在一起 所以将这两个的值设置为同一个，这样 处理数和预警数会同时使用左侧的 y轴的坐标
162.  
     {
163.  
     name: "预警数",
164.  
     type: "bar",
165.  
     // stack设置柱状图堆叠,stack后面要跟同样的名字
166.  
     stack:"Search Engine",
167.  
     color: "#FF9F48",
168.  
     barWidth:"14px", // 柱子的宽度
169.  
     yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
170.  
     showAllSymbol: true, //显示所有图形。
171.  
     itemStyle: {
172.  
     normal: {
173.  
      
174.  
     barBorderRadius: [2, 2, 2, 2],
175.  
     lineStyle: {
176.  
     width: 3
177.  
     }
178.  
     }
179.  
     },
180.  
     data:[
181.  
     "123",
182.  
     "34",
183.  
     "56",
184.  
     "23",
185.  
     "566",
186.  
     ]
187.  
     },
188.  
     {
189.  
     name: "处理率",
190.  
     type: "line",
191.  
     color: "#ff4d1c",
192.  
     barWidth:"14px", // 柱子的宽度
193.  
     yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
194.  
     showAllSymbol: true, //显示所有图形。
195.  
     smooth: true, //平滑曲线显示
196.  
     symbol:"circle",
197.  
     symbolSize: 9, //标记的大小
198.  
     itemStyle: {
199.  
     normal: {
200.  
     lineStyle: {
201.  
     width: 1
202.  
     }
203.  
     }
204.  
     },
205.  
     data:[
206.  
     "123",
207.  
     "34",
208.  
     "56",
209.  
     "23",
210.  
     "566",
211.  
     ]
212.  
     },
213.  
      
214.  
     ]
215.  
     };

案例三：

代码及注释：

1.  
   this.chartOption = {
2.  
   legend: {
3.  
   itemHeight: 6, // 图例的高度
4.  
   itemWidth: 16, // 图例的宽度
5.  
   x: "center", //居右显示
6.  
   inactiveColor: "rgba(0,0,0,0.3)",// 图例关闭后的颜色
7.  
   textStyle: {
8.  
   fontSize: 12,
9.  
   color: "#0B9295", // 图例的文字颜色
10.  
    padding: [3, 0, 0, 0],
11.  
    },
12.  
    data: ["实时用电量", "近七天平均用电量"],
13.  
    },
14.  
    tooltip: {
15.  
    trigger: "axis",
16.  
     
17.  
    },
18.  
    grid: {
19.  
    left: "0%",
20.  
    right: "0%",
21.  
    bottom: "3%",
22.  
    containLabel: true
23.  
    },
24.  
    xAxis: {
25.  
    type: "category",
26.  
    // data: yearList,
27.  
    data:[
28.  
    "11:00", "11:20", "11:40", "12:00", "12:20", "12:40", "13:00"
29.  
    ],
30.  
    splitLine: {//分割线配置
31.  
    show: false
32.  
    },
33.  
    axisLabel: { // x轴线文字的样式
34.  
    textStyle: {
35.  
    color: "#B4FFF5",
36.  
    fontSize: 12
37.  
    },
38.  
    },
39.  
    axisTick: {
40.  
    show: false
41.  
    },
42.  
    axisLine: {//x轴线的颜色以及宽度
43.  
    show: true,
44.  
    lineStyle: {
45.  
    color: "#3AB2B4",
46.  
    type: "solid",
47.  
    width: 1
48.  
    }
49.  
    }
50.  
    },
51.  
    yAxis: [
52.  
    {
53.  
    type: "value",
54.  
    name:"单位：kwh",
55.  
    splitNumber: 5,
56.  
    nameTextStyle:{ // name的样式
57.  
    color:"#0B9295"
58.  
    },
59.  
     
60.  
    axisTick: { // 取消刻度线上的小刻度
61.  
    show: false
62.  
    },
63.  
    axisLine:{ // 取消整个刻度线
64.  
    show:false
65.  
    },
66.  
     
67.  
    splitLine: {
68.  
    lineStyle: {
69.  
    color: "#3AB2B4",
70.  
    opacity: 0.3,
71.  
    type: "solid",
72.  
    },
73.  
    },
74.  
    axisLabel: {
75.  
    textStyle: {
76.  
    color: "#B4FFF5",
77.  
    },
78.  
    },
79.  
    },
80.  
     
81.  
    ],
82.  
    series: [
83.  
    {
84.  
    type: "line",
85.  
    symbol: "none", // 不展示折线的圆点
86.  
    name:"近七天平均用电量",
87.  
    smooth: true, // 平滑的折线
88.  
    itemStyle: {
89.  
    normal: {
90.  
    color: "#ff9f48", //改变折线点的颜色
91.  
    lineStyle: {
92.  
    color: "#ff9f48", //改变折线颜色
93.  
    type: "solid"
94.  
    }
95.  
    }
96.  
    },
97.  
    areaStyle: {
98.  
    //折线图颜色半透明
99.  
    color: {
100.  
     type: "linear",
101.  
     x: 0,
102.  
     y: 0,
103.  
     x2: 0,
104.  
     y2: 1,
105.  
     colorStops: [{
106.  
     offset: 0, color: "rgba(255, 159, 72, 0.5)" // 0% 处的颜色
107.  
     }, {
108.  
     offset: 1, color: "rgba(255, 159, 72, 0)" // 100% 处的颜色
109.  
     }],
110.  
     global: false // 缺省为 false
111.  
     }
112.  
     },
113.  
     toolbox: {
114.  
     show: false,
115.  
     },
116.  
     data: [480, 390, 500, 260, 320, 660, 320],
117.  
     },
118.  
     {
119.  
     type: "line",
120.  
     symbol: "none", // 不展示折线的圆点
121.  
     name:"实时用电量",
122.  
     smooth: true, // 平滑的折线
123.  
     itemStyle: {
124.  
     normal: {
125.  
     color: "#4fe2cf", //改变折线点的颜色
126.  
     lineStyle: {
127.  
     color: "#4fe2cf", //改变折线颜色
128.  
     type: "solid"
129.  
     }
130.  
     }
131.  
     },
132.  
     areaStyle: { // 折线下的区域颜色
133.  
     //折线图颜色半透明
134.  
     color: {
135.  
     type: "linear",
136.  
     x: 0,
137.  
     y: 0,
138.  
     x2: 0,
139.  
     y2: 1,
140.  
     colorStops: [{
141.  
     offset: 0, color: "rgba(79, 226, 207, 0.5)" // 0% 处的颜色
142.  
     }, {
143.  
     offset: 1, color: "rgba(79, 226, 207,0)" // 100% 处的颜色
144.  
     }],
145.  
     global: false // 缺省为 false
146.  
     }
147.  
     },
148.  
     toolbox: {
149.  
     show: false,
150.  
     },
151.  
     data: [340, 510, 540, 600, 500, 600, 640],
152.  
     },
153.  
      
154.  
      
155.  
     ],
156.  
     };

案例四：（动态前进图）

1.  
   import Util from "@/util/echarts/common"; // 引入echarts公共的类\
2.  
    
3.  
   export default class Bar extends Util {
4.  
   constructor(el, option) {
5.  
   super(el, option); // 继承父类，echarts公共类的值
6.  
   this.init(); // 初始化
7.  
   }
8.  
    
9.  
   init() {
10.  
    this.myChart = this.$e.init(this.$el);
11.  
    this.setCharts();
12.  
    var index = 0; //播放所在下标
13.  
     
14.  
    setTimeout(()=>{
15.  
    this.myChart.dispatchAction({
16.  
    type: "showTip",
17.  
    seriesIndex:0,
18.  
    dataIndex: index //默认显示第几个
19.  
    });
20.  
    index ;
21.  
    if(index > 96) { // 此处的96为x轴的数据长度
22.  
    index = 0;
23.  
    }
24.  
    });
25.  
    // 改变this指向
26.  
    var option = this.chartOption;
27.  
    var myChart = this.myChart;
28.  
     
29.  
    setInterval(function () {
30.  
    // 每次向后滚动一个，最后一个从头开始。
31.  
    if (option.dataZoom[0].endValue === 96 ) { // 此处的96为x轴的数据长度
32.  
    option.dataZoom[0].endValue = 15;
33.  
    option.dataZoom[0].startValue = 0;
34.  
    }
35.  
    else {
36.  
    option.dataZoom[0].endValue = option.dataZoom[0].endValue 1;
37.  
    option.dataZoom[0].startValue = option.dataZoom[0].startValue 1;
38.  
    }
39.  
    myChart.setOption(option, true); // 将配置项加到echarts中
40.  
    }, 2000);
41.  
    window.addEventListener("resize", () => { // 监听屏幕缩放，使echarts同样缩放
42.  
    this.myChart.resize();
43.  
    });
44.  
    }
45.  
     
46.  
    setCharts() { // 配置echarts
47.  
    this.chartOption = {
48.  
    legend: {
49.  
    itemHeight: 6, // 图例的高度
50.  
    itemWidth: 16, // 图例的宽度
51.  
    x: "center", //居右显示
52.  
    inactiveColor: "rgba(0,0,0,0.3)",
53.  
    textStyle: {
54.  
    fontSize: 12,
55.  
    color: "#0B9295", // 图例的文字颜色
56.  
    padding: [3, 0, 0, 0],
57.  
    },
58.  
    data: ["实时用电量", "近七天平均用电量"],
59.  
    left:'right',
60.  
    },
61.  
    tooltip: {
62.  
    trigger: "axis",
63.  
     
64.  
    },
65.  
    dataZoom: [
66.  
    {
67.  
    show:false, // 隐藏下拉条
68.  
    startValue: 0, // 从头开始。
69.  
    endValue: 9 // 一次性展示9个。
70.  
    }
71.  
    ],
72.  
    grid: {
73.  
    left: "3%",
74.  
    right: "0%",
75.  
    bottom: "3%",
76.  
    containLabel: true
77.  
    },
78.  
    xAxis: {
79.  
    type: "category",
80.  
    // data: yearList,
81.  
    data:[
82.  
    "11:00", "11:20", "11:40", "12:00", "12:20", "12:40", "13:00","11:00", "11:20", "11:40", "12:00", "12:20", "12:40", "13:00"
83.  
    ],
84.  
    splitLine: {//分割线配置
85.  
    show: false
86.  
    },
87.  
    axisLabel: { // x轴线文字的样式
88.  
    textStyle: {
89.  
    color: "#B4FFF5",
90.  
    fontSize: 12
91.  
    },
92.  
    },
93.  
    axisTick: {
94.  
    show: false
95.  
    },
96.  
    axisLine: {//x轴线的颜色以及宽度
97.  
    show: true,
98.  
    lineStyle: {
99.  
    color: "#3AB2B4",
100.  
     type: "solid",
101.  
     width: 1
102.  
     }
103.  
     }
104.  
     },
105.  
     yAxis: [
106.  
     {
107.  
     type: "value",
108.  
     name:"单位：kwh",
109.  
     splitNumber: 5,
110.  
     nameTextStyle:{ // name的样式
111.  
     color:"#0B9295"
112.  
     },
113.  
      
114.  
     axisTick: { // 取消刻度线上的小刻度
115.  
     show: false
116.  
     },
117.  
     axisLine:{ // 取消整个刻度线
118.  
     show:false
119.  
     },
120.  
      
121.  
     splitLine: {
122.  
     lineStyle: {
123.  
     color: "#3AB2B4",
124.  
     opacity: 0.3,
125.  
     type: "solid",
126.  
     },
127.  
     },
128.  
     axisLabel: {
129.  
     textStyle: {
130.  
     color: "#B4FFF5",
131.  
     },
132.  
     },
133.  
     },
134.  
      
135.  
     ],
136.  
     series: [
137.  
     {
138.  
     type: "line",
139.  
     symbol: "none", // 不展示折线的圆点
140.  
     name:"近七天平均用电量",
141.  
     smooth: true, // 平滑的折线
142.  
     itemStyle: {
143.  
     normal: {
144.  
     color: "#ff9f48", //改变折线点的颜色
145.  
     lineStyle: {
146.  
     color: "#ff9f48", //改变折线颜色
147.  
     type: "solid"
148.  
     }
149.  
     }
150.  
     },
151.  
     areaStyle: {
152.  
     //折线图颜色半透明
153.  
     color: {
154.  
     type: "linear",
155.  
     x: 0,
156.  
     y: 0,
157.  
     x2: 0,
158.  
     y2: 1,
159.  
     colorStops: [{
160.  
     offset: 0, color: "rgba(255, 159, 72, 0.5)" // 0% 处的颜色
161.  
     }, {
162.  
     offset: 1, color: "rgba(255, 159, 72, 0)" // 100% 处的颜色
163.  
     }],
164.  
     global: false // 缺省为 false
165.  
     }
166.  
     },
167.  
     toolbox: {
168.  
     show: false,
169.  
     },
170.  
     data: [340, 51, 540, 600, 500, 60, 60,30, 50, 50, 60, 50, 60, 60],
171.  
     },
172.  
     {
173.  
     type: "line",
174.  
     symbol: "none", // 不展示折线的圆点
175.  
     name:"实时用电量",
176.  
     smooth: true, // 平滑的折线
177.  
     itemStyle: {
178.  
     normal: {
179.  
     color: "#4fe2cf", //改变折线点的颜色
180.  
     lineStyle: {
181.  
     color: "#4fe2cf", //改变折线颜色
182.  
     type: "solid"
183.  
     }
184.  
     }
185.  
     },
186.  
     areaStyle: { // 折线下的区域颜色
187.  
     //折线图颜色半透明
188.  
     color: {
189.  
     type: "linear",
190.  
     x: 0,
191.  
     y: 0,
192.  
     x2: 0,
193.  
     y2: 1,
194.  
     colorStops: [{
195.  
     offset: 0, color: "rgba(79, 226, 207, 0.5)" // 0% 处的颜色
196.  
     }, {
197.  
     offset: 1, color: "rgba(79, 226, 207,0)" // 100% 处的颜色
198.  
     }],
199.  
     global: false // 缺省为 false
200.  
     }
201.  
     },
202.  
     toolbox: {
203.  
     show: false,
204.  
     },
205.  
     data: [340, 510, 540, 600, 500, 600, 640,340, 510, 540, 600, 500, 600, 640],
206.  
     },
207.  
      
208.  
      
209.  
     ],
210.  
     };
211.  
     }
212.  
     }

案例五：雷达图

代码：

1.  
   mounted(){
2.  
   // 渲染echarts
3.  
   // 监听屏幕，实现自适应
4.  
   window.onresize = () => {
5.  
   this.myChart.resize();
6.  
   };
7.  
   setTimeout(()=>{
8.  
   this.initChart()
9.  
   },1000)
10.  
    },
11.  
    methods:{
12.  
    initChart(){
13.  
    this.myChart = echarts.init(document.getElementById('chart'))
14.  
    const option = {
15.  
    color: ["#1b7cff", "#6dcd62"],
16.  
    title: {
17.  
    text: '企业能力分析',
18.  
    textStyle:{
19.  
    color: '#2E3A55',
20.  
    fontWeight: 500,
21.  
    fontSize: '15px',
22.  
    }
23.  
    },
24.  
    tooltip:{
25.  
    show: true,
26.  
    // trigger: 'item',
27.  
    // confine: true,
28.  
    // textStyle: {
29.  
    // color: "#fff",
30.  
    // fontSize: 13
31.  
    // }
32.  
    },
33.  
    legend: {
34.  
    itemHeight: 8,
35.  
    itemWidth: 8,
36.  
    data: ['企业得分占比', '市均值得分占比'],
37.  
    x: "right",
38.  
    textStyle: {
39.  
    fontSize: 10,
40.  
    color: "#B2BACC", // 图例的文字颜色
41.  
    }
42.  
    },
43.  
    radar: {
44.  
    // shape: 'circle',
45.  
    center: ['50%', '59%'],//位置
46.  
    name: {
47.  
    textStyle: {
48.  
    color: '#6A7284',
49.  
    fontSize:'12px'
50.  
    }
51.  
    },
52.  
    indicator: [
53.  
    { name: '创新人才', max: 6500 },
54.  
    { name: '创新投入', max: 16000 },
55.  
    { name: '创新产出', max: 30000 },
56.  
    { name: '企业成长性', max: 38000 },
57.  
    { name: '创新平台', max: 52000 },
58.  
    { name: '创新活动', max: 25000 },
59.  
    { name: '创新成果', max: 25000 }
60.  
    ]
61.  
    },
62.  
    series: [
63.  
    {
64.  
    type: 'radar',
65.  
    // label:{
66.  
    // show: true,
67.  
    // position: 'top',
68.  
    // color: 'rgba(111,82,38, .8)',
69.  
    // fontSize: 13,
70.  
    // fontWeight: 'bold'
71.  
    // },
72.  
    symbolSize: 6 , // 雷达区域节点的大小
73.  
    // // 区域的颜色
74.  
    // itemStyle: {
75.  
    // borderWidth: 2,
76.  
    // opacity: 1
77.  
    // },
78.  
    // 雷达区域的背景颜色的样式
79.  
    areaStyle: {
80.  
    opacity: 0.2
81.  
    },
82.  
    data: [
83.  
    {
84.  
    value: [4200, 3000, 20000, 35000, 50000, 18000],
85.  
    name: '企业得分占比'
86.  
    },
87.  
    {
88.  
    value: [5000, 14000, 28000, 26000, 42000, 21000],
89.  
    name: '市均值得分占比'
90.  
    }
91.  
    ]
92.  
    }
93.  
    ]
94.  
    }
95.  
    this.myChart.setOption(option, true);
96.  
    }
97.  
    }

案例六：自定义tooltip提示

1.  
   import Common from "@/util/echatrs/common";
2.  
   import * as echarts from "echarts";
3.  
   export default class BarLine extends Common {
4.  
    
5.  
   constructor(el, option) {
6.  
   super(el, option);
7.  
   this.init();
8.  
    
9.  
   }
10.  
    init() {
11.  
    this.myChart = this.$e.init(this.$el);
12.  
    this.setCharts();
13.  
    this.myChart.setOption(this.chartOption, true);
14.  
    window.addEventListener("resize", () => {
15.  
    this.myChart.resize();
16.  
    });
17.  
    this.myChart.on("click", (a) => {
18.  
    if (this.option.click) {
19.  
    this.option.click(a);
20.  
    }
21.  
    });
22.  
    }
23.  
     
24.  
    setCharts() {
25.  
     
26.  
    if (this.option.theme === "dark") {
27.  
    this.chartOption = {
28.  
    legend: {
29.  
    itemHeight: 6,
30.  
    itemWidth: 16,
31.  
    x: "center", //居右显示
32.  
    inactiveColor: "rgba(0,0,0,0.9)", // 图例关闭后的颜色
33.  
    textStyle: {
34.  
    fontSize: 14,
35.  
    color: "#7E9CC1", // 图例的文字颜色
36.  
    padding: [3, 0, 0, 0],
37.  
    },
38.  
    data: ["延迟完工项目数量", "延迟完工率"],
39.  
    },
40.  
    tooltip: {
41.  
    trigger: "axis",
42.  
    axisPointer: { // 鼠标移上去时,触发后的样式
43.  
    type: "shadow"
44.  
    },
45.  
    padding: 0,
46.  
    borderColor: "rgba(0, 0, 0, 0)",
47.  
    borderWidth: 0,
48.  
    formatter: function (obj) {
49.  
    // console.log(obj);
50.  
    var name = obj[0].name || obj[1].name;
51.  
    var number = obj[0].value;
52.  
    var rate = obj[1].value;
53.  
    // const lineImg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHxSURBVHgB7ZpPSwJBGId/O0YSBPkJwg51jPwCldcgqIunIKVTFNi9ix6iax66JRp0qosQdCnwT6cISoJOHdw61SUMglLRad6VrQjT0sl1aB4YWN1lmWf2fWdmd8aATSLiAdxhcD5tlV7EQB4cMSytJz/ IhKbXtRqaXHkhRqYKFf8WI6YdYH4RgHqVN7GBKv4XKLyQfEjCPXwoGqUmAiiMFTF5ZpiIikmoCqis2FQHC3gNFrAabSA0ygv0Ic2KQRW4B0cggzM5yeM7G jHdp ArIq3 m9/m8INSJzf2eFQzM8/W7MDY9BFlIF5k8OUCyXml5D4dKzAoXAqhB4aXqNp38AMpEqQOFBpZvoJP5M8uYKty2SmHJgcXQcspAqEL08bdkL9bQAjc7dRk/mnEYLNCN2fY5d0TP9JVKT2IZ6olDu0JobEdS9JiZnpc5gbaQ/AWp1X2rnvfIEHftSceucbKQJUKv7j/awdnbccEJXLL9a50ik1VjxG6QINGr178g/PlhvXzToyaDtHKBWpBK9yP2o4l JCAHKjfTMAjrBEJ/XORRGjwNOowWcRgs4jRZwGrHMamSgKgbyDNVqFqrCEWPoq26Blu3Vw6RNHwyhSBGM aGWRH2zB zdKja0b4LzsMiL3ly95zwjStaKGmp4wRu/9633ZSgvNQAAAABJRU5ErkJggg==";
54.  
    const darkImg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHJSURBVHgB7ZpPTsJAFMa/KQZd1sQDwM6ddmVcKTfQE4gngCtwAzmBeBJwZVyBiSbGDcVoogkLookJCNR5HRpMxIL1wTA6v6TJ9E a9715b/o6eQIR9cBFHwUE2A PZUSggQHK2BWV8SXiIsjAQVWOMjADH0PkpBBfCbgMmjDH AgfaXgp6f28nIc8zMPFO7qODJ0CTCWFPSHDJ4DBODAcK0A3VoBurADdGC9gBQlpbsniaRUs F0ge4VEJJ4BLuN/ 67/G0KTqL2qcIjDTQEH62CDVcDhHdAZxD TSS xAErsaQJoBjhhFeCuqGOR2CT TKUNtKYkMS2ZRxtgg1VA6UGuQr34ZyiJl1ZAcxsLxxZzurEC4ig/A2dtzJW5fHaoHjqWm5W1F3VOy tplreCjWCfAfK6dzM2nqCxdy3vPYEdNgHk9dwtUGzJeqj/9T7VSMV7JWRaxfoTWARM8vp3NN7U31fpESwk3hulypO umTILIZPgnKiuqnGSX8p7eaubqwA3VgBurECdPMHBAjUYC4NBwOcw1SGKIuwyaOHOkxsNdgRWQee6ISNE3TBHPyRzaNulQjqm1CtBxo2SGaA8pVCfg0noeMlH8Uifmj5AZoIAAAAAElFTkSuQmCC";
55.  
     
56.  
    // console.log(name, number, rate);
57.  
    return "<div style=\"display:flex;flex-direction:column;justify-content:space-between;min-width:160px;height:104px;background: #001737;border-radius: 4px;border: 1px solid #1991FF;box-shadow: inset 0px 0px 10px rgba(0, 201, 255, 0.6);padding:12px;\">"
58.  
    "<div style='display:flex;align-items:center;height:24px;margin-bottom:12px'>" "<img width='24px' src="https://blog.csdn.net/qq_44603011/article/details/ darkImg " /> " "<span style='margin-left:8px;font-weight: 500;font-size: 16px;line-height: 22px;color: #fff;'>" name "</span></div>"
59.  
    "<div style='width:100%;height:45px;display:flex;justify-content:space-around'>"
60.  
    "<div style='display:flex;flex-direction:column;justify-content:space-between;align-items:center'>"
61.  
    "<span style='font-weight: 500;font-size: 20px;line-height: 24px;color: #009D85;'>" number "项</span>"
62.  
    "<span style='font-weight: 400;font-size: 12px;line-height: 17px;color: #728EB1;'>延迟完工</span>"
63.  
    "</div>"
64.  
    "<div style='display:flex;flex-direction:column;justify-content:space-between;align-items:center'>"
65.  
    "<span style='font-weight: 500;font-size: 20px;line-height: 24px;color: #F6AB00;'>" rate "%</span>"
66.  
    "<span style='font-weight: 400;font-size: 12px;line-height: 17px;color: #728EB1;'>延迟率</span>"
67.  
    "</div>"
68.  
    "</div>"
69.  
    "</div>";
70.  
    }
71.  
    },
72.  
    grid: {
73.  
    left: "3.5%",
74.  
    right: "2.5%",
75.  
    bottom: "21%",
76.  
    containLabel: false
77.  
    },
78.  
    xAxis: {
79.  
    type: "category",
80.  
    data: this.option.xValue,
81.  
    splitLine: {//分割线配置
82.  
    show: false
83.  
    },
84.  
    axisLabel: { // x轴线文字的样式
85.  
    rotate: 45,
86.  
    textStyle: {
87.  
    color: "#707793",
88.  
    fontSize: 12
89.  
    },
90.  
    },
91.  
    axisTick: {
92.  
    show: false
93.  
    },
94.  
    axisLine: {//x轴线的颜色以及宽度
95.  
    show: true,
96.  
    lineStyle: {
97.  
    color: "rgba(0, 201, 255, 0.2)",
98.  
    type: "solid",
99.  
    width: 1
100.  
     }
101.  
     }
102.  
     },
103.  
     yAxis: [
104.  
     {
105.  
     type: "value",
106.  
     name: "项目数量：个",
107.  
     nameTextStyle: { // name的样式
108.  
     color: "#707793",
109.  
     fontSize: 14
110.  
     },
111.  
     splitLine: {//分割线配置
112.  
     show: false,
113.  
     },
114.  
     axisTick: { // 取消刻度线上的小刻度
115.  
     show: true
116.  
     },
117.  
     axisLine: { // 取消整个刻度线
118.  
     show: true,
119.  
     lineStyle: {
120.  
     color: "rgba(0, 201, 255, 0.2)",
121.  
     type: "solid",
122.  
     width: 1
123.  
     }
124.  
     },
125.  
     axisLabel: { // y轴的文字样式
126.  
     textStyle: {
127.  
     color: "#707793",
128.  
     fontSize: 14
129.  
     },
130.  
     }
131.  
     },
132.  
     {
133.  
     type: "value",
134.  
     name: "延迟率：%",
135.  
     nameTextStyle: {
136.  
     color: "#707793",
137.  
     fontSize: 14
138.  
     },
139.  
     position: "right",
140.  
     splitLine: {//分割线配置
141.  
     show: false,
142.  
     },
143.  
     axisTick: { // 取消刻度线上的小刻度
144.  
     show: true
145.  
     },
146.  
     axisLine: { // 取消整个刻度线
147.  
     show: true,
148.  
     lineStyle: {
149.  
     color: "rgba(0, 201, 255, 0.2)",
150.  
     type: "solid",
151.  
     width: 1
152.  
     }
153.  
     },
154.  
     axisLabel: {
155.  
     show: true,
156.  
     textStyle: {
157.  
     color: "#707793",
158.  
     fontSize: 14
159.  
     },
160.  
     }
161.  
     },
162.  
     // {
163.  
     // type: "value",
164.  
     // gridIndex: 0,
165.  
     // min: 50,
166.  
     // max: 100,
167.  
     // splitNumber: 8,
168.  
     // splitLine: {
169.  
     // show: false
170.  
     // },
171.  
     // axisLine: {
172.  
     // show: false
173.  
     // },
174.  
     // axisTick: {
175.  
     // show: false
176.  
     // },
177.  
     // axisLabel: {
178.  
     // show: false
179.  
     // },
180.  
     // splitArea: {
181.  
     // show: true,
182.  
     // areaStyle: {
183.  
     // color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
184.  
     // }
185.  
     // }
186.  
     // }
187.  
      
188.  
     ],
189.  
     series: [
190.  
     {
191.  
     name: "延迟完工项目数量",
192.  
     type: "bar",
193.  
     color: "#1795ff",
194.  
     nameStyle: {
195.  
     width: 100
196.  
     },
197.  
     yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
198.  
     barWidth: "14px", // 柱子的宽度
199.  
     itemStyle: {
200.  
     normal: {
201.  
     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
202.  
     offset: 0,
203.  
     color: "#00C9FF" // 0% 处的颜色
204.  
     }, {
205.  
     offset: 1,
206.  
     color: "#1991FF" // 100% 处的颜色
207.  
     }], false),
208.  
     lineStyle: {
209.  
     width: 3
210.  
     },
211.  
     barBorderRadius: [2, 2, 0, 0],
212.  
     },
213.  
     },
214.  
     data: this.option.yCount
215.  
     },
216.  
     {
217.  
     name: "延迟完工率",
218.  
     type: "line",
219.  
     color: "#F6AB00",
220.  
     barWidth: "14px", // 柱子的宽度
221.  
     yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
222.  
     showAllSymbol: true, //显示所有图形。
223.  
     smooth: false, //平滑曲线显示
224.  
     symbol: "circle",
225.  
     symbolSize: 5, //标记的大小
226.  
     itemStyle: {
227.  
     normal: {
228.  
     lineStyle: {
229.  
     width: 1
230.  
     }
231.  
     }
232.  
     },
233.  
     data: this.option.yRate
234.  
     },
235.  
      
236.  
     ]
237.  
     };
238.  
     } else {
239.  
     this.chartOption = {
240.  
     legend: {
241.  
     itemHeight: 6,
242.  
     itemWidth: 16,
243.  
     x: "center", //居右显示
244.  
     inactiveColor: "rgba(0,0,0,0.3)", // 图例关闭后的颜色
245.  
     textStyle: {
246.  
     fontSize: 14,
247.  
     color: "#707793", // 图例的文字颜色
248.  
     padding: [3, 0, 0, 0],
249.  
     },
250.  
     data: ["延迟完工项目数量", "延迟完工率"],
251.  
     },
252.  
     tooltip: {
253.  
     trigger: "axis",
254.  
     axisPointer: { // 鼠标移上去时,触发后的样式
255.  
     type: "shadow"
256.  
     },
257.  
     padding: 0,
258.  
     borderColor: "rgba(0, 0, 0, 0)",
259.  
     borderWidth: 0,
260.  
     formatter: function (obj) {
261.  
     // console.log(obj);
262.  
     var name = obj[0].name || obj[1].name;
263.  
     var number = obj[0].value;
264.  
     var rate = obj[1].value;
265.  
     const lineImg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHxSURBVHgB7ZpPSwJBGId/O0YSBPkJwg51jPwCldcgqIunIKVTFNi9ix6iax66JRp0qosQdCnwT6cISoJOHdw61SUMglLRad6VrQjT0sl1aB4YWN1lmWf2fWdmd8aATSLiAdxhcD5tlV7EQB4cMSytJz/ IhKbXtRqaXHkhRqYKFf8WI6YdYH4RgHqVN7GBKv4XKLyQfEjCPXwoGqUmAiiMFTF5ZpiIikmoCqis2FQHC3gNFrAabSA0ygv0Ic2KQRW4B0cggzM5yeM7G jHdp ArIq3 m9/m8INSJzf2eFQzM8/W7MDY9BFlIF5k8OUCyXml5D4dKzAoXAqhB4aXqNp38AMpEqQOFBpZvoJP5M8uYKty2SmHJgcXQcspAqEL08bdkL9bQAjc7dRk/mnEYLNCN2fY5d0TP9JVKT2IZ6olDu0JobEdS9JiZnpc5gbaQ/AWp1X2rnvfIEHftSceucbKQJUKv7j/awdnbccEJXLL9a50ik1VjxG6QINGr178g/PlhvXzToyaDtHKBWpBK9yP2o4l JCAHKjfTMAjrBEJ/XORRGjwNOowWcRgs4jRZwGrHMamSgKgbyDNVqFqrCEWPoq26Blu3Vw6RNHwyhSBGM aGWRH2zB zdKja0b4LzsMiL3ly95zwjStaKGmp4wRu/9633ZSgvNQAAAABJRU5ErkJggg==";
266.  
     // const darkImg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHJSURBVHgB7ZpPTsJAFMa/KQZd1sQDwM6ddmVcKTfQE4gngCtwAzmBeBJwZVyBiSbGDcVoogkLookJCNR5HRpMxIL1wTA6v6TJ9E a9715b/o6eQIR9cBFHwUE2A PZUSggQHK2BWV8SXiIsjAQVWOMjADH0PkpBBfCbgMmjDH AgfaXgp6f28nIc8zMPFO7qODJ0CTCWFPSHDJ4DBODAcK0A3VoBurADdGC9gBQlpbsniaRUs F0ge4VEJJ4BLuN/ 67/G0KTqL2qcIjDTQEH62CDVcDhHdAZxD TSS xAErsaQJoBjhhFeCuqGOR2CT TKUNtKYkMS2ZRxtgg1VA6UGuQr34ZyiJl1ZAcxsLxxZzurEC4ig/A2dtzJW5fHaoHjqWm5W1F3VOy tplreCjWCfAfK6dzM2nqCxdy3vPYEdNgHk9dwtUGzJeqj/9T7VSMV7JWRaxfoTWARM8vp3NN7U31fpESwk3hulypO umTILIZPgnKiuqnGSX8p7eaubqwA3VgBurECdPMHBAjUYC4NBwOcw1SGKIuwyaOHOkxsNdgRWQee6ISNE3TBHPyRzaNulQjqm1CtBxo2SGaA8pVCfg0noeMlH8Uifmj5AZoIAAAAAElFTkSuQmCC";
267.  
      
268.  
     // console.log(name, number, rate);
269.  
     return "<div style=\"display:flex;flex-direction:column;justify-content:space-between;min-width:160px;height:104px;background: #FFFFFF;border-radius: 4px;border: 2px solid #FFFFFF;box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.08);padding:12px;\">"
270.  
     "<div style='display:flex;align-items:center;height:24px;margin-bottom:12px'>" "<img width='24px' src="https://blog.csdn.net/qq_44603011/article/details/ lineImg " /> " "<span style='margin-left:8px;font-weight: 500;font-size: 16px;line-height: 22px;color: #313B5E;'>" name "</span></div>"
271.  
     "<div style='width:100%;height:45px;display:flex;justify-content:space-around'>"
272.  
     "<div style='display:flex;flex-direction:column;justify-content:space-between;align-items:center'>"
273.  
     "<span style='font-weight: 500;font-size: 20px;line-height: 24px;color: #009D85;'>" number "项</span>"
274.  
     "<span style='font-weight: 400;font-size: 12px;line-height: 17px;color: #728EB1;'>延迟完工</span>"
275.  
     "</div>"
276.  
     "<div style='display:flex;flex-direction:column;justify-content:space-between;align-items:center'>"
277.  
     "<span style='font-weight: 500;font-size: 20px;line-height: 24px;color: #F6AB00;'>" rate "%</span>"
278.  
     "<span style='font-weight: 400;font-size: 12px;line-height: 17px;color: #728EB1;'>延迟率</span>"
279.  
     "</div>"
280.  
     "</div>"
281.  
     "</div>";
282.  
     }
283.  
     },
284.  
     grid: {
285.  
     left: "3.5%",
286.  
     right: "2.5%",
287.  
     bottom: "21%",
288.  
     containLabel: false
289.  
     },
290.  
     xAxis: {
291.  
     type: "category",
292.  
     data: this.option.xValue,
293.  
     splitLine: {//分割线配置
294.  
     show: false
295.  
     },
296.  
     axisLabel: { // x轴线文字的样式
297.  
     rotate: 45,
298.  
     textStyle: {
299.  
     color: "#707793",
300.  
     fontSize: 12
301.  
     },
302.  
     },
303.  
     axisTick: {
304.  
     show: false
305.  
     },
306.  
     axisLine: {//x轴线的颜色以及宽度
307.  
     show: true,
308.  
     lineStyle: {
309.  
     color: "rgba(0, 112, 107, 0.2)",
310.  
     type: "solid",
311.  
     width: 1
312.  
     }
313.  
     }
314.  
     },
315.  
     yAxis: [
316.  
     {
317.  
     type: "value",
318.  
     name: "项目数量：个",
319.  
     nameTextStyle: { // name的样式
320.  
     color: "#707793",
321.  
     fontSize: 14
322.  
     },
323.  
     splitLine: {//分割线配置
324.  
     show: false,
325.  
     },
326.  
     axisTick: { // 取消刻度线上的小刻度
327.  
     show: true
328.  
     },
329.  
     axisLine: { // 取消整个刻度线
330.  
     show: true,
331.  
     lineStyle: {
332.  
     color: "rgba(0, 112, 107, 0.2)",
333.  
     type: "solid",
334.  
     width: 1
335.  
     }
336.  
     },
337.  
     axisLabel: { // y轴的文字样式
338.  
     textStyle: {
339.  
     color: "#707793",
340.  
     fontSize: 14
341.  
     },
342.  
     }
343.  
     },
344.  
     {
345.  
     type: "value",
346.  
     name: "延迟率：%",
347.  
     nameTextStyle: {
348.  
     color: "#707793",
349.  
     fontSize: 14
350.  
     },
351.  
     position: "right",
352.  
     splitLine: {//分割线配置
353.  
     show: false,
354.  
     },
355.  
     axisTick: { // 取消刻度线上的小刻度
356.  
     show: true
357.  
     },
358.  
     axisLine: { // 取消整个刻度线
359.  
     show: true,
360.  
     lineStyle: {
361.  
     color: "rgba(0, 112, 107, 0.2)",
362.  
     type: "solid",
363.  
     width: 1
364.  
     }
365.  
     },
366.  
     axisLabel: {
367.  
     show: true,
368.  
     textStyle: {
369.  
     color: "#707793",
370.  
     fontSize: 14
371.  
     },
372.  
     }
373.  
     },
374.  
     // {
375.  
     // type: "value",
376.  
     // gridIndex: 0,
377.  
     // min: 50,
378.  
     // max: 100,
379.  
     // splitNumber: 8,
380.  
     // splitLine: {
381.  
     // show: false
382.  
     // },
383.  
     // axisLine: {
384.  
     // show: false
385.  
     // },
386.  
     // axisTick: {
387.  
     // show: false
388.  
     // },
389.  
     // axisLabel: {
390.  
     // show: false
391.  
     // },
392.  
     // splitArea: {
393.  
     // show: true,
394.  
     // areaStyle: {
395.  
     // color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
396.  
     // }
397.  
     // }
398.  
     // }
399.  
      
400.  
     ],
401.  
     series: [
402.  
     {
403.  
     name: "延迟完工项目数量",
404.  
     type: "bar",
405.  
     color: "#009D85",
406.  
     nameStyle: {
407.  
     width: 100
408.  
     },
409.  
     yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
410.  
     barWidth: "14px", // 柱子的宽度
411.  
     itemStyle: {
412.  
     normal: {
413.  
     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
414.  
     offset: 0,
415.  
     color: "#00C29F" // 0% 处的颜色
416.  
     }, {
417.  
     offset: 1,
418.  
     color: "#009D85" // 100% 处的颜色
419.  
     }], false),
420.  
     lineStyle: {
421.  
     width: 3
422.  
     },
423.  
     barBorderRadius: [2, 2, 0, 0],
424.  
     }
425.  
     },
426.  
     data: this.option.yCount
427.  
     },
428.  
     {
429.  
     name: "延迟完工率",
430.  
     type: "line",
431.  
     color: "#F6AB00",
432.  
     barWidth: "14px", // 柱子的宽度
433.  
     yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
434.  
     showAllSymbol: true, //显示所有图形。
435.  
     smooth: false, //平滑曲线显示
436.  
     symbol: "circle",
437.  
     symbolSize: 5, //标记的大小
438.  
     itemStyle: {
439.  
     normal: {
440.  
     lineStyle: {
441.  
     width: 1
442.  
     }
443.  
     }
444.  
     },
445.  
     data: this.option.yRate
446.  
     },
447.  
      
448.  
     ]
449.  
     };
450.  
      
451.  
     }
452.  
     }
453.  
      
454.  
      
455.  
     setField() {
456.  
     const colors = this.option.colors;
457.  
     const sourceData = this.option.data;
458.  
     const total = sourceData.reduce((num, item) => {
459.  
     num = item.value;
460.  
     return num;
461.  
     }, 0);
462.  
     // 内环间隔距离
463.  
     const inSplitWidth = 3;
464.  
     // 为了实现内环间隔距离，需要额外插入的数值。200 只是个系数，值越大，单位间隔的距离越小。
465.  
     const inSplitValue = Math.floor(total / (150 / inSplitWidth));
466.  
     // 外环间隔比内环间隔大的值
467.  
     const itemSplitWidth = 2;
468.  
     // 外环间隔距离
469.  
     const outSplitWidth = inSplitWidth itemSplitWidth;
470.  
     // 为了实现外环间隔距离，需要额外插入的数值。
471.  
     const outSplitValue = Math.floor(total / (150 / outSplitWidth));
472.  
      
473.  
     // 内环数据的总数
474.  
     const valueTotal = total inSplitValue * sourceData.length;
475.  
      
476.  
     function getTextAngle(currentAngle, angle) {
477.  
     currentAngle = currentAngle angle;
478.  
     if (currentAngle <= 90) {
479.  
     return -currentAngle;
480.  
     } else if (currentAngle <= 180 && currentAngle > 90) {
481.  
     return 180 - currentAngle;
482.  
     } else if (currentAngle < 270 && currentAngle > 180) {
483.  
     return 180 - currentAngle;
484.  
     } else if (currentAngle < 360 && currentAngle >= 270) {
485.  
     return 360 - currentAngle;
486.  
     }
487.  
     }
488.  
     // 内环数据。在原数据的后面添加间隔数据（间隔块设置颜色透明）
489.  
     const valueData = sourceData.reduce((arr, item) => {
490.  
     const currentTotal = arr.reduce((total, item) => {
491.  
     total = item.value;
492.  
     return total;
493.  
     }, 0);
494.  
      
495.  
     const currentAngle = 360 * (currentTotal / valueTotal);
496.  
     const angle = 360 * (item.value / valueTotal) / 2;
497.  
      
498.  
     arr.push({
499.  
     name: item.name,
500.  
     value: item.value,
501.  
     label: {
502.  
     lineHeight: 80,
503.  
     rotate: getTextAngle(currentAngle, angle)
504.  
     }
505.  
     }, {
506.  
     name: "",
507.  
     value: inSplitValue,
508.  
     itemStyle: {
509.  
     color: "transparent",
510.  
     opacity: 0
511.  
     },
512.  
     label: {
513.  
     show: false
514.  
     },
515.  
     labelLine: {
516.  
     show: false
517.  
     }
518.  
     });
519.  
     return arr;
520.  
     }, []);
521.  
      
522.  
     // 原数据需要减去的值（外环每块的数据都要比原数据少一点才能达到外环嵌在内环的效果）
523.  
     const itemReduced = outSplitValue - inSplitValue;
524.  
     // 外环数据
525.  
     const outValueData = sourceData.reduce((arr, item) => {
526.  
     const currentTotal = arr.reduce((total, item) => {
527.  
     total = item.value;
528.  
     return total;
529.  
     }, 0);
530.  
      
531.  
     const currentAngle = 360 * (currentTotal / valueTotal);
532.  
     const angle = 360 * (item.value / valueTotal) / 2;
533.  
      
534.  
     arr.push({
535.  
     name: item.name,
536.  
     value: item.value,
537.  
     label: {
538.  
     color: "#fff",
539.  
     position: "inside",
540.  
     align: "center",
541.  
     lineHeight: 10,
542.  
     // verticalAlign: 'top',
543.  
     rotate: getTextAngle(currentAngle, angle)
544.  
     }
545.  
     }, {
546.  
     name: "",
547.  
     value: outSplitValue,
548.  
     itemStyle: {
549.  
     color: "transparent",
550.  
     opacity: 0
551.  
     },
552.  
     label: {
553.  
     show: false,
554.  
     textStyle: {
555.  
     fontSize: 12,
556.  
     color: "#fff"
557.  
     }
558.  
     },
559.  
     labelLine: {
560.  
     show: false
561.  
     }
562.  
     });
563.  
      
564.  
     return arr;
565.  
     }, []);
566.  
      
567.  
     return {
568.  
     colors,
569.  
     total,
570.  
     valueData,
571.  
     itemReduced,
572.  
     valueTotal,
573.  
     outValueData
574.  
     };
575.  
     }
576.  
     }

案例七：（立体柱状图） 

1.  
   setCharts() {
2.  
    
3.  
    
4.  
    
5.  
    
6.  
    
7.  
    
8.  
   const barWidth = 10
9.  
   this.chartOption = {
10.  
     
11.  
    grid: {
12.  
    left: "15%",
13.  
    right: "0%",
14.  
    bottom: "15%",
15.  
    containLabel: false
16.  
    },
17.  
    legend: {
18.  
    itemHeight: 6, // 图例的高度
19.  
    itemWidth: 16, // 图例的宽度
20.  
    x: "center", //居右显示
21.  
    inactiveColor: "rgba(0,0,0,0.3)",// 图例关闭后的颜色
22.  
    textStyle: {
23.  
    fontSize: 12,
24.  
    color: "#A1D1EF", // 图例的文字颜色
25.  
    padding: [0, 0, 0, 0],
26.  
    },
27.  
    selectedMode: false,
28.  
    data: ['老人数', '预警数'],
29.  
    },
30.  
    tooltip: {
31.  
    trigger: 'axis',
32.  
    axisPointer: {
33.  
    type: 'shadow'
34.  
    },
35.  
    formatter: function (e) {
36.  
    // console.log(e);
37.  
    var str =
38.  
    e[4].axisValue
39.  
    "<br>"
40.  
    "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:"
41.  
    e[4].color.colorStops[0].color
42.  
    ";'></span>"
43.  
    ""
44.  
    e[4].seriesName
45.  
    " : "
46.  
    e[4].value
47.  
    "<br>"
48.  
    "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:"
49.  
    e[5].color.colorStops[0].color
50.  
    ";'></span>"
51.  
    ""
52.  
    e[5].seriesName
53.  
    " : "
54.  
    e[5].value;
55.  
    return str;
56.  
    }
57.  
     
58.  
    },
59.  
    xAxis: {
60.  
    type: 'category',
61.  
    data: ['市区', '高邮市', '仪征市', '江都区', '宝应县'
62.  
    ],
63.  
    splitLine: {//分割线配置
64.  
    show: false
65.  
    },
66.  
    axisLabel: { // x轴线文字的样式
67.  
    textStyle: {
68.  
    color: "#A1D1EF",
69.  
    fontSize: 12
70.  
    },
71.  
    },
72.  
    axisTick: {
73.  
    show: false
74.  
    },
75.  
    axisLine: {//x轴线的颜色以及宽度
76.  
    show: true,
77.  
    lineStyle: {
78.  
    color: "rgba(39, 166, 255, 0.5)",
79.  
    type: "solid",
80.  
    width: 1
81.  
    }
82.  
    }
83.  
    },
84.  
    yAxis:
85.  
    {
86.  
    type: "value",
87.  
    name: '单位：kw·h ',
88.  
    splitNumber: 5,
89.  
    nameTextStyle: { // name的样式
90.  
    color: "#6699C1",
91.  
    align: 'left',
92.  
    padding: [0, 0, 0, -25]
93.  
    },
94.  
     
95.  
    axisTick: { // 取消刻度线上的小刻度
96.  
    show: false
97.  
    },
98.  
    axisLine: { // 取消整个刻度线
99.  
    show: false
100.  
     },
101.  
      
102.  
     splitLine: {
103.  
     lineStyle: {
104.  
     color: "#27A6FF",
105.  
     opacity: 0.3,
106.  
     type: "dashed",
107.  
     },
108.  
     },
109.  
     axisLabel: {
110.  
     textStyle: {
111.  
     color: "#A1D1EF",
112.  
     },
113.  
     },
114.  
     },
115.  
      
116.  
     series: [
117.  
     // (0)第一个柱子 中间的正方形
118.  
     {
119.  
     type: "pictorialBar", // 象型柱状
120.  
     symbol: "diamond",
121.  
      
122.  
     symbolSize: [barWidth, 5], // 调整大小
123.  
     // symbolOffset: [-13, -3], // 图形相对于原本位置的偏移
124.  
     symbolOffset: ["-55%", -3], // 图形相对于原本位置的偏移
125.  
     symbolPosition: "end",
126.  
     z: 12,
127.  
     color: "#6ac1ff",
128.  
     data: [112, 23, 56, 6, 89],
129.  
     },
130.  
     // (1)第二个柱子中间的正方形
131.  
     {
132.  
     type: "pictorialBar",
133.  
     symbol: "diamond",
134.  
     symbolSize: [barWidth, 8],
135.  
     // symbolOffset: [13, -3],
136.  
     symbolOffset: ["55%", -3],
137.  
     symbolPosition: "end",
138.  
     z: 12,
139.  
     color: "#ffad96",
140.  
     data: [12, 213, 256, 16, 9],
141.  
     },
142.  
     // (2)第一个柱子 底部的正方形
143.  
     {
144.  
     type: "pictorialBar",
145.  
     symbol: "diamond",
146.  
     symbolSize: [barWidth, 5],
147.  
     // symbolOffset: [-13, 3],
148.  
     symbolOffset: ["-55%", 3],
149.  
     z: 12,
150.  
     color: "#6ac1ff",
151.  
     data: [112, 23, 56, 6, 89],
152.  
     },
153.  
     // (3)第二个柱子 底部的正方形
154.  
     {
155.  
     name: "",
156.  
     type: "pictorialBar",
157.  
     symbol: "diamond",
158.  
     symbolSize: [barWidth, 5],
159.  
     // symbolOffset: [13, 3],
160.  
     symbolOffset: ["55%", 3],
161.  
     color: "#ffad96",
162.  
     z: 12,
163.  
     data: [12, 213, 256, 16, 9],
164.  
     },
165.  
     // (4)一个柱子, 下方有颜色填充的的柱子
166.  
     {
167.  
     name: '老人数',
168.  
     type: "bar",
169.  
     barWidth: barWidth,
170.  
     barGap: "20%",
171.  
     // zlevel: 2,
172.  
     stack: "1",
173.  
     itemStyle: {
174.  
     opacity: 1,
175.  
     color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
176.  
     {
177.  
     offset: 0.5,
178.  
     color: "#27a6ff",
179.  
     // color: '#2c61bc',
180.  
     },
181.  
     {
182.  
     offset: 0.5,
183.  
     color: "#0f85d7",
184.  
     },
185.  
     {
186.  
     offset: 1,
187.  
     color: "#1d90e1",
188.  
     },
189.  
     ]),
190.  
     // barBorderRadius: 0,
191.  
     borderRadius: 0,
192.  
     },
193.  
     // 是否在每个柱子显示 相应的值
194.  
     label: {
195.  
     show: false,
196.  
      
197.  
     position: ["0", "-25"],
198.  
     color: "#005dd9",
199.  
     fontSize: 14,
200.  
     fontWeight: 'bold'
201.  
     },
202.  
     data: [112, 23, 56, 6, 89],
203.  
     },
204.  
     // (5)第二个柱子, 下方有颜色填充的的柱子
205.  
     {
206.  
     name: '预警数',
207.  
     type: "bar",
208.  
     stack: "2",
209.  
     barWidth: barWidth,
210.  
     itemStyle: {
211.  
     opacity: 1,
212.  
     color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
213.  
     {
214.  
     offset: 0.5,
215.  
     color: "#ff744c",
216.  
     },
217.  
     {
218.  
     offset: 0.5,
219.  
     color: "#d2512c",
220.  
     },
221.  
     {
222.  
     offset: 1,
223.  
     color: "#eb653e",
224.  
     },
225.  
     ]),
226.  
     // barBorderRadius: 0,
227.  
     borderRadius: 0,
228.  
     },
229.  
     // 是否在每个柱子显示 相应的值
230.  
     label: {
231.  
     show: false,
232.  
     position: ["0", "-25"],
233.  
     color: "#06e6f6",
234.  
     fontSize: 14,
235.  
     fontWeight: 'bold'
236.  
     },
237.  
     data: [12, 213, 256, 16, 9],
238.  
     },
239.  
     ]
240.  
      
241.  
     }
242.  
     }