Echarts樣式

Echarts設置樣式以下

1. <div id="main" style="width: 250px;height:200px;"></div>
2.     <script type="text/javascript">
3.         var myChart = echarts.init(document.getElementById('main'));
4.         // 指定圖表的配置項和數據
5.         var option = {
6.             tooltip : { //提示框
7.                 trigger: 'axis', //觸發類型(座標軸觸發)
8.                 alwaysShowContent:false, //是否永遠顯示提示框的內容
9.                 backgroundColor:'rgba(32,174,252,0.7)', //提示框的背景顏色
10.                 textStyle:{ //提示框浮層的文本樣式
11.  
12.  
13.                 },
14.             },
15.             calculable : true,
16.             xAxis : [
17.                 {
18.                     type : 'category',
19.                     name:'(月)', //X軸名稱單位
20.                     nameLocation:'end', //名稱的位置
21.                     nameTextStyle:{ //名稱的樣式
22.                         color:'#999',
23.                         fontSize:'12px'
24.                     },
25.                     nameGap:0, //名稱與X軸的距離
26.                     boundaryGap: true,//座標的刻度是否在中間
27.                     min:'3',//座標軸刻度最小值
28.                     max:'dataMax', //座標軸刻度的最大值
29.                     axisLine:{//座標軸線條相關設置(顏色等)
30.                         lineStyle:{
31.                             color:'#ccc'
32.                         }
33.                     },
34.                     axisTick:{ //座標軸刻度相關設置
35.                         length:'0' //我把長度設置成0了
36.                     },
37.                     axisLabel:{ //座標軸刻度標籤
38.                         margin:7, //刻度標籤與軸線之間的距離
39.                         textStyle:{
40.                             color:"#999", //座標軸刻度文字的顏色
41.                             fontSize:'12px' //座標軸刻度文字的大小
42.                         }
43.                     },
44.                     data : ['3','4','5','6','7','8','9','10']
45.  
46.                 }
47.             ],//X軸設置
48.             yAxis : [
49.                 {
50.                     type : 'value', //類型數值軸
51.                     name:'(人)', //座標軸名稱
52.                     nameTextStyle:{ //名稱的樣式
53.                         color:'#999',
54.                         fontSize:'12px'
55.                     },
56.                     nameGap:3, //名稱與Y軸的距離
57.                     axisTick:{ //座標軸刻度相關設置
58.                         length:'0' //我設置成0了
59.                     },
60.                     axisLine:{//座標軸線條相關設置(顏色等)
61.                         lineStyle:{
62.                             color:'#ccc'
63.                         }
64.                     },
65.                     axisLabel:{//座標軸標籤相關設置,距離顏色等
66.                         margin:7,
67.                         //formatter: '{value} °C',//標籤內容內置的格式轉化器好比這個表示在後面加一個c
68.                         textStyle:{
69.                             color:"#999", //座標軸刻度文字的顏色
70.                             fontSize:'12px' //座標軸刻度文字的大小
71.                         },
72.                     },
73.                     splitLine:{ //座標軸分隔線。默認數值軸顯示，類目軸不顯示。
74.                         show:false
75.                     }
76.                 }
77.             ],
78.             grid:{ //直角座標系內繪圖網格
79.                 left:36 //因爲1000顯示被擋住了,因此我讓他左移36px;這個功能相似於paddingleft
80.             },
81.             series : [ //系列列表
82.                 {
83.                     name:'人', //系列名稱 用於tooltip的顯示
84.                     type:'line',
85.                     data:[360, 500, 400, 600, 530, 840, 540,350],
86.                     itemStyle:{ //折線拐點的樣式
87.                         normal:{
88.                             color:'#20aefc', //折線拐點的顏色
89.                         }
90.                     },
91.                     lineStyle:{ //線條的樣式
92.                         normal:{
93.                             color:'#20aefc', //折線顏色
94.                         }
95.                     },
96.                     areaStyle:{ //區域填充樣式
97.                         normal:{
98.                             //線性漸變
99.                             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
100.                                 offset: 0, color: '#b1e3fe' // 0% 處的顏色
101.                             }, {
102.                                 offset: 1, color: '#fff' // 100% 處的顏色
103.                             }], false)
104.                         }
105.                     },
106.                     markPoint : { //圖標標註
107.                         data : [
108.                             {type : 'max', name: '最大值'},
109.                             {type : 'min', name: '最小值'}
110.                         ]
111.                     },
112.                     markLine : {
113.                         data : [
114.                             {type : 'average', name: '平均值'}
115.                         ]
116.                     }
117.                 }
118.  
119.             ]
120.         };
121.         // 使用剛指定的配置項和數據顯示圖表。
122.         myChart.setOption(option);
123.     </script>
124. </div>