ECharts 折线图and柱状图 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no" />
 6         <title></title>
 7     </head>
 8     <body>
 9         <div id="echarts_bar" style="width: 100vw; height:400px;"></div>
10         
11     </body>
12     <!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> -->
13     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
14     <script type="text/javascript">
15         var myChart = echarts.init(document.getElementById("echarts_bar"));
16 
17         option = {
18             xAxis: {
19                 axisLabel: {
20                     // inside: true,//把坐标值放到表格外(默认为false)
21                     textStyle: {
22                         color: 'red'
23                     }
24                 },
25                 /* 轴--开始 */
26                 axisTick: {
27                     show: false
28                 },
29                 axisLine: {
30                     show: false
31                 },
32                 /* 轴--结束 */
33                 type: 'category',
34                 data: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
35             },
36             yAxis: {
37                 axisLabel: {
38                     textStyle: {
39                         color: 'red'
40                     }
41                 },
42                 axisTick: {
43                     show: false
44                 },
45                 axisLine: {
46                     show: false
47                 },
48                 type: 'value'
49             },
50             series: [{
51                 data: [120, 200, 150, 80, 10, 110, 130],
52                 type: 'line',//bar
53                 itemStyle: {
54                     normal: {
55                         color: new echarts.graphic.LinearGradient(
56                             0, 0, 0, 1,
57                             [
58                                 {offset: 0, color: '#00FEFC'},
59                                 {offset: 0.3, color: '#00AFFF'},
60                                 {offset: 0.6, color: '#007DF2'},
61                                 {offset: 1, color: '#1E5FCE'}
62                             ]
63                         )
64                     }
65                 },
66                 markPoint: {
67                     data: [
68                         {type: 'max', name: '最大值'},
69                         {type: 'min', name: '最小值'}
70                     ]
71                 }
72             }]
73         };
74         
75         myChart.setOption(option);
76     </script>
77 </html>

 

posted @ 2019-05-31 17:38  Salicejy  阅读(252)  评论(0)    收藏  举报