echart 參數 vue配置 圖文展現

https://blog.csdn.net/she_lover/article/details/51448967

https://blog.csdn.net/n_meng/article/details/78593743

以上博客寫的很清楚，可是對應找屬性和方法不是很好找，最近寫項目用到echart正好記錄如下。

 

一.npm安裝echarts

npm install echarts --save

二.在mian.js裏面導入echarts

import echart from 'echarts'

  //掛載echart

  Vue.prototype.$echarts = echart

三.使用echart（目前是父組件引用子組件，具體的參數配置和使用都在子組件裏面編寫）

1.自定義的子組件1html代碼（barechart.vue）

1 <template>
2     <div id="main1" style="height:300px;"></div>
3 </template>

2.自定義的子組件1內容(直接代碼了，該加註釋的都加了)

1 mounted () {
2       this.$nextTick(function(){
3           this.drawbarechart();
4       })
5 },

 1 methods: {
 2         drawbarechart() {
 3             let _this = this;
 4             this.charts = this.$echarts.init(document.getElementById('main1'))
 5             this.charts.setOption({
 6                 title:{     //設置標題的樣式
 7                     padding:[0,15],
 8                     text:_this.titletext,
 9                     // text:'標題1',
10                     // x:'center',
11                     textStyle:{
12                         fontSize:14,
13                         color:'#333',
14                     }
15                 },
16                 tooltip:{   //設置懸浮框的樣式
17                     trigger:'axis',
18                     confine:true,
19                     axisPointer:{
20                         type:'shadow'
21                     }
22                 },
23                 grid:{  //設置canvas構造內容的邊距
24                     left:'4%',
25                     right:'12%',
26                     bottom:'3%',
27                     containLabel:true
28                 },
29                 xAxis:{ //X軸參數配置
30                     type:'category',
31                     name:_this.xAxisname,
32                     data:_this.xAxisdata,
33                     // axisLine:{       // 座標軸線
34                     //     show:true,   // 默認顯示，屬性show控制顯示與否
35                     //     lineStyle:{  // 屬性lineStyle控制線條樣式
36                     //         color:'#ddd'
37                     //     }
38                     // },
39                     // axisLabel:{
40                     //     show:true,
41                     //     textStyle:{
42                     //         color:'#333'
43                     //     }
44                     // },
45                     splitLine:{show:false},    // 分隔線
46                     splitArea:{         // 分隔區域
47                         show:true,      // 默認不顯示，屬性show控制顯示與否
48                         areaStyle:{     // 屬性areaStyle（詳見areaStyle）控制區域樣式
49                             color:[
50                                 'rgba(100,100,100,0.03)',
51                                 'rgba(100,100,100,0)'
52                             ]
53                         }
54                     },
55                     axisTick:{  //軸上的齒度是否顯示
56                         alignWithLabel:true,
57                         show:false
58                     }
59                 },
60                 yAxis:{     //X軸參數配置
61                     type:'value',
62                     name:_this.yAxisname,
63 
64                     // splitLine:{show: false},//去除網格線
65 
66                     axisTick:{  //軸上的齒度是否顯示
67                         show:false
68                     }
69                 },
70                 series:[    //柱形的參數配置
71                     {
72                         name:_this.seriesname,
73                         type:'bar',
74                         barWidth: '25',
75                         data:_this.seriesdata,
76 
77                         itemStyle:{
78                             normal:{
79                                 barBorderRadius:[5, 5, 5, 5],
80                                 color:'rgb(72,118,254)',
81                                 label:{
82                                     show:true,
83                                     position:'top',
84                                     textStyle:{
85                                         color:'rgb(72,118,254)'
86                                     }
87                                 }
88                             }
89                         }
90                     }
91                 ]
92             })
93         }
94     },

3.如下是自定義子組件2，折線圖（lineechart.vue）

1 <template>
2     <div id="main2" style="height:300px;background:#ffffff"></div>
3 </template>

4.自定義的子組件2內容(直接代碼了，該加註釋的都加了)

  1 mounted () {  3         this.$nextTick(function(){
  4             this.drawlineechart();
  5         })
  6         
  7     },
  8     methods: {
  9         drawlineechart() {
 10             let _this = this;
 11             this.charts = this.$echarts.init(document.getElementById('main2'))
 12             this.charts.setOption({
 13                 title:{
 14                     text:_this.titletext,
 15                     // text:'標題2',
 16                     padding:[5,15],
 17                     // x:'center',
 18                     textStyle:{
 19                         fontSize:14,
 20                         color:'#333'
 21                     }
 22                 },
 23                 tooltip:{
 24                     trigger:'axis',
 25                 },
 26                 grid:{
 27                     left:'2%',
 28                     right:'12%',
 29                     bottom:'3%',
 30                     containLabel:true
 31                 },
 32                 xAxis:{
 33                     type:'category',
 34                     name:_this.xAxisname,
 35                     splitLine:{show:false},
 36                     // boundaryGap:false,
 37                     data:_this.xAxisdata,
 38                     splitArea:{
 39                         show:true,
 40                         areaStyle:{
 41                             color:[
 42                                 'rgba(100,100,100,0.03)',
 43                                 'rgba(100,100,100,0)'
 44                             ]
 45                         }
 46                     },
 47 
 48                     // axisLine:{       // 座標軸線
 49                     //     show:true,   // 默認顯示，屬性show控制顯示與否
 50                     //     lineStyle:{  // 屬性lineStyle控制線條樣式
 51                     //         color:'#111'
 52                     //     }
 53                     // },
 54                     // axisLabel:{
 55                     //     show:true,
 56                     //     interval:0,     //X軸字段所有顯示出來，默認不顯示完能夠把該項去掉
 57                     //     textStyle:{
 58                     //         color:'#111'
 59                     //     }
 60                     // },
 61                     splitLine:{show:false},    // 分隔線
 62                     // splitArea:{         // 分隔區域
 63                     //     show:true,      // 默認不顯示，屬性show控制顯示與否
 64                     //     areaStyle:{     // 屬性areaStyle（詳見areaStyle）控制區域樣式
 65                     //         color:[
 66                     //             'rgba(100,100,100,0.03)',
 67                     //             'rgba(100,100,100,0)'
 68                     //         ]
 69                     //     }
 70                     // },
 71                     axisTick:{
 72                         show:false
 73                     }
 74                 },
 75                 yAxis:{
 76                     type:'value',
 77                     name:_this.yAxisname,
 78 
 79                     // axisLine:{       // 座標軸線
 80                     //     show:true,   // 默認顯示，屬性show控制顯示與否
 81                     //     lineStyle:{  // 屬性lineStyle控制線條樣式
 82                     //         color:'#666'
 83                     //     }
 84                     // },
 85 
 86                     // splitLine:{show: false},//去除網格線
 87 
 88                     axisLabel:{
 89                         formatter:'{value}(%)'
 90                     },
 91                     axisTick:{
 92                         show:false
 93                     }
 94                 },
 95                 series:[
 96                     {
 97                         name:_this.seriesname,
 98                         type:'line',
 99 
100                         symbol:'circle',    //折線圖拐點
101 
102                         symbolSize:10,
103                         showAllSymbol:true,
104                         data:_this.seriesdata,
105 
106                         itemStyle:{
107                             normal:{
108                                 color:'rgb(72,118,254)',
109                                 label:{
110                                     show:true,
111                                     position:'top',
112                                     formatter:'{c}(%)',     //在series加上單位
113                                     textStyle:{
114                                         color:'rgb(72,118,254)'
115                                     }
116                                 }
117                             }
118                         }
119                     },
120                     
121                 ]
122             })
123         }
124     },

 

 以上，關於echart各類經常使用的參數，就是此次的主要內容。

 稍微更新一下：目前需求有跟着屏幕大小自動去刷新echart寬高，試了多種方式，最終解決了單個頁面多個echart圖自適應寬高問題：

1 window.addEventListener('resize', ()=> {
2                 this.charts.resize();
3             })

加在setOption後面便可。

window. addEventListener( 'resize', () => {

this. charts. resize();

})