quickchart中的echarts图表如何修改样式

以该图左下方的图表为例，进行修改
（1）获取到对应的dom元素

编辑环境下拿到对应的组件名之后即可通过代码获取

1.   var dom = $('div[data-v-alias=right01_item06_echarts01]div div')[0]

复制代码

（2）将修改的options样式拿到，可在此进行编辑修改

（3）引入echarts，将刚刚修改好的options粘贴到代码中，获取dom元素修改echarts图表样式
//这里引入的是官方资源，也可以自行下载资源上传引入

1. var dom = $('div[data-v-alias=right01_item06_echarts01]div div')[0]
   
2.     // echarts 初始化
   
3.     var bottomCharts = window.echarts.init(dom);
   
4.     option = {
   
5.         tooltip: {
   
6.             trigger: 'axis',
   
7.             axisPointer: {
   
8.                 type: 'shadow'
   
9.             },
   
10.             backgroundColor: 'rgba(233, 24, 48, 0.5)',
    
11.             borderColor: 'rgba(233, 253, 238, 0.4)',
    
12.             textStyle: {
    
13.                 color: '#CFE3FC',
    
14.             },
    
15.             borderWidth: 1
    
16.         },
    
17.         grid: {
    
18.             left: '10px',
    
19.             right: '10px',
    
20.             top: '20px',
    
21.             bottom: '1px',
    
22.             containLabel: true
    
23.         },
    
24.         toolbox: {
    
25.             show: true,
    
26.             orient: 'vertical',
    
27.             x: 'right',
    
28.             y: 'bottom'
    
29.         },
    
30.         xAxis: [
    
31.             {
    
32.                 type: 'category',
    
33.                 boundaryGap: true,
    
34.                 axisTick: {
    
35.                     show: false
    
36.                 },
    
37.                 data: ['A厂区', 'B厂区', 'C厂区', 'D厂区', '1区'],
    
38.                 axisLine: {
    
39.                     show: true,
    
40.                     lineStyle: {
    
41.                         color: 'rgba(255,255,255, 1)',
    
42.                         opacity: 0.2
    
43.                     }
    
44.                 },
    
45.                 // axisLabel: {
    
46.                 //   interval: 0,
    
47.                 //   color: 'rgba(255,255,255, 1)',
    
48.                 //   fontSize: 11,
    
49. 
    
50.                 // }
    
51.                 axisLabel: { //  改变x轴字体颜色和大小
    
52.                     margin: 6,
    
53.                     textStyle: {
    
54.                         color: "rgba(255,255,255,1)",
    
55.                         fontSize: 11,
    
56.                         fontFamily: '青春体',
    
57. 
    
58.                     }
    
59.                 }
    
60.             }
    
61.         ],
    
62.         yAxis: [
    
63.             {
    
64.                 type: 'value',
    
65.                 axisTick: {
    
66.                     show: false
    
67.                 },
    
68.                 splitNumber: 5,
    
69.                 axisLine: {
    
70.                     show: true,
    
71.                     lineStyle: {
    
72.                         color: 'rgba(255,255,255, 0.2)',
    
73.                     },
    
74.                     //   symbol: ['none', 'arrow'],
    
75.                     //   symbolSize: [5, 12],
    
76.                     //   symbolOffset: [0, 10]
    
77.                 },
    
78.                 axisLabel: {
    
79.                     interval: 0,
    
80.                     color: 'rgba(255,255,255, 1)',
    
81.                     fontSize: 9
    
82.                 },
    
83.                 splitLine: {
    
84.                     show: false,
    
85.                     lineStyle: {
    
86.                         type: 'solid',
    
87.                         color: 'rgba(255,255,255, 0.3)',
    
88.                         width: 1,
    
89.                     }
    
90.                 }
    
91.             }
    
92.         ],
    
93.         series: [
    
94.             {
    
95.                 type: 'bar',
    
96.                 yAxisIndex: 0,
    
97.                 name: '污水排放量',
    
98.                 itemStyle: {
    
99.                     normal: {
    
100.                         color: new echarts.graphic.LinearGradient(
     
101.                             0,
     
102.                             0,
     
103.                             0,
     
104.                             1,
     
105.                             [
     
106.                                 {
     
107.                                     offset: 0,
     
108.                                     color: 'rgba(222,199,255, 1)'
     
109.                                 },
     
110.                                 {
     
111.                                     offset: 1,
     
112.                                     color: 'rgba(233,199,255, 0)'
     
113.                                 }
     
114.                             ],
     
115.                             false
     
116.                         )
     
117.                     }
     
118.                 },
     
119.                 barWidth: 10,
     
120.                 barGap: 1,
     
121.                 data: [50, 40, 25, 22, 37, 29],
     
122.                 label: {
     
123.                     normal: {
     
124.                         show: true,
     
125.                         position: "top",
     
126.                         textStyle: {
     
127.                             color: 'rgba(0,241,255,1)',
     
128.                             fontSize: 14,
     
129.                             fontFamily: '青春体',
     
130.                             //   padding: [0, 0, 0, 0],
     
131.                         },
     
132.                     },
     
133.                 },
     
134.             }
     
135.         ]
     
136.     }
     
137.     bottomCharts.setOption(option);

复制代码

（4）查看修改后效果