echart 之line的一种案例

zhgc

function echarts_4() {

1. 
   
2. // 基于准备好的dom，初始化echarts实例
   
3. var myChart = echarts.init(document.getElementById('echart4'));
   
4. 
   
5. option = {
   
6.         tooltip: {
   
7.                 trigger: 'axis',
   
8.                 axisPointer: {
   
9.                         lineStyle: {
   
10.                                 color: '#dddc6b'
    
11.                         }
    
12.                 }
    
13.         },
    
14.         
    
15.         legend: {
    
16.                 top:'0%',
    
17.         data:['沙井','越南'],
    
18.                 textStyle: {
    
19.                         color: 'rgba(255,255,255,.5)',
    
20.                         fontSize:'12',
    
21.         }
    
22.     },
    
23.         
    
24.     grid: {
    
25.         left: '10',
    
26.                 top: '30',
    
27.         right: '10',
    
28.         bottom: '10',
    
29.         containLabel: true
    
30.     },
    
31. 
    
32.     xAxis: [{
    
33.         type: 'category',
    
34.         boundaryGap: false,
    
35.                 axisLabel:  {
    
36.                 textStyle: {
    
37.                                          color: "rgba(255,255,255,.6)",
    
38.                                         fontSize:12,
    
39.                 },
    
40.             },
    
41.         axisLine: {
    
42.                         lineStyle: {
    
43.                                 color: 'rgba(255,255,255,.2)'
    
44.                         }
    
45. 
    
46.         },
    
47.                 data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']
    
48. 
    
49.                 }, {
    
50. 
    
51.         axisPointer: {show: false},
    
52.         axisLine: {  show: false},
    
53.         position: 'bottom',
    
54.         offset: 20,
    
55. 
    
56.       
    
57. 
    
58.     }],
    
59. 
    
60.     yAxis: [{
    
61.         type: 'value',
    
62.         axisTick: {show: false},
    
63.         axisLine: {
    
64.             lineStyle: {
    
65.                 color: 'rgba(255,255,255,.1)'
    
66.             }
    
67.         },
    
68.        axisLabel:  {
    
69.                 textStyle: {
    
70.                                          color: "rgba(255,255,255,.6)",
    
71.                                         fontSize:12,
    
72.                 },
    
73.             },
    
74. 
    
75.         splitLine: {
    
76.             lineStyle: {
    
77.                  color: 'rgba(255,255,255,.1)'
    
78.             }
    
79.         }
    
80.     }],
    
81.         
    
82.     series: [
    
83.                 {
    
84.         name: '沙井',
    
85.         type: 'line',
    
86.         smooth: true,
    
87.         symbol: 'circle',
    
88.         symbolSize: 5,
    
89.         showSymbol: false,
    
90.         lineStyle: {
    
91.                         
    
92.             normal: {
    
93.                                 color: '#0184d5',
    
94.                 width: 2
    
95.             }
    
96.         },
    
97.         areaStyle: {
    
98.             normal: {
    
99.                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    
100.                     offset: 0,
     
101.                     color: 'rgba(1, 132, 213, 0.4)'
     
102.                 }, {
     
103.                     offset: 0.8,
     
104.                     color: 'rgba(1, 132, 213, 0.1)'
     
105.                 }], false),
     
106.                 shadowColor: 'rgba(0, 0, 0, 0.1)',
     
107.             }
     
108.         },
     
109.                         itemStyle: {
     
110.                         normal: {
     
111.                                 color: '#0184d5',
     
112.                                 borderColor: 'rgba(221, 220, 107, .1)',
     
113.                                 borderWidth: 12
     
114.                         }
     
115.                 },
     
116.          data: [527000, 437000, 545000, 456000, 488000, 291000, 533000, 677000, 668000, 543000, 599000, 420000, 450000, 567000, 535000, 418000, 399000, 387000, 498003, 577700, 500000, 417000, 399000, 388000]
     
117. 
     
118.                 },
     
119.                 {
     
120.         name: '越南',
     
121.         type: 'line',
     
122.         smooth: true,
     
123.         symbol: 'circle',
     
124.         symbolSize: 5,
     
125.         showSymbol: false,
     
126.         lineStyle: {
     
127.                         
     
128.             normal: {
     
129.                                 color: '#00d8d7',
     
130.                 width: 2
     
131.             }
     
132.         },
     
133.         areaStyle: {
     
134.             normal: {
     
135.                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
     
136.                     offset: 0,
     
137.                     color: 'rgba(0, 216, 135, 0.4)'
     
138.                 }, {
     
139.                     offset: 0.8,
     
140.                     color: 'rgba(0, 216, 135, 0.1)'
     
141.                 }], false),
     
142.                 shadowColor: 'rgba(0, 0, 0, 0.1)',
     
143.             }
     
144.         },
     
145.                 itemStyle: {
     
146.                         normal: {
     
147.                                 color: '#00d8d7',
     
148.                                 borderColor: 'rgba(221, 220, 107, .1)',
     
149.                                 borderWidth: 12
     
150.                         }
     
151.                 },
     
152.         data: [127000, 237000, 145000, 156000, 188000, 99000, 133000, 177000, 168000, 143000, 199000, 220000, 250000, 267000, 235000, 218000, 199000, 187000, 198003, 177700, 200000, 217000, 199000, 188000]
     
153. 
     
154.                 },
     
155.         ]
     
156. 
     
157. };
     
158.       
     
159. // 使用刚指定的配置项和数据显示图表。
     
160. myChart.setOption(option);
     
161. window.addEventListener("resize",function(){
     
162.         myChart.resize();
     
163. });
     
164.    
     

复制代码

}