echarts版本折线图

        1.效果如下：

        绘制折线图，应该算是说echarts中使用最简单也算使用频率最高的一种功能了吧。根据官网列子能找出规律，只是有些属性对于初接触者来说，会有点陌生，不过仔细阅读一下还是不难找出窍门滴~~~

完整代码(仅供参考)：

  1 <!DOCTYPE html>
  2 <html>
  3 
  4 <head>
  5     <meta charset="utf-8">
  6     <title>折线图</title>
  7     
  8     <script src="/static/js/jquery.min.js"></script>
  9     <!-- 引入 echarts.js -->
 10     <script src="/static/js/echarts/echarts.js"></script>
 11 </head>
 12 
 13 <body>
 14     <!-- 点击框 -->
 15     <div onclick="clickme()" id="maindiv" style="border:1px solid #666;background-color: #ff55ff;width:100px;height:100px;">
 16         <p>click me !!!</p>
 17     </div>
 18     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
 19     <div id="main" style="width: 100%;height:1000px;"></div>
 20     <script type="text/javascript">
 21         // 基于准备好的dom，初始化echarts实例
 22         var myChart = echarts.init(document.getElementById('main'));
 23         function clickme(){
 24             //隐藏掉点击框
 25             $('#maindiv').css('display','none');
 26             // 指定图表的配置项和数据
 27             var option = {
 28                 backgroundColor: '#394056',
 29                 title: {
 30                     text: '手机销量折线图',
 31                     left: 'center', //grid 组件离容器左侧的距离 
 32                     textStyle: {
 33                         fontWeight: '400',
 34                         fontSize: 25,
 35                         color: '#fff'
 36                     },
 37                 },
 38                 tooltip: {
 39                     trigger: 'axis',
 40                     axisPointer: {
 41                         lineStyle: {
 42                             color: '#57617B'
 43                         }
 44                     }
 45                 },
 46                 legend: {
 47                     icon: 'rect',
 48                     itemWidth: 14,
 49                     itemHeight: 5,
 50                     itemGap: 13,
 51                     //legend中的data的值需要跟series中的name保持一致，否则不会出现右上角的提示
 52                     data: ['华为手机销量','一加手机销量'], 
 53                     right: '4%',
 54                     textStyle: {
 55                         fontSize: 12,
 56                         color: '#F1F1F3'
 57                     }
 58                 },
 59                 grid: {
 60                     left: '3%',
 61                     right: '4%',
 62                     bottom: '3%',
 63                     containLabel: true
 64                 },
 65                 xAxis: [{
 66                     type: 'category',
 67                     boundaryGap: false,
 68                     axisLine: {
 69                         lineStyle: {
 70                             color: '#57617B'
 71                         }
 72                     },
 73                     data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
 74                 }],
 75                 yAxis: [{
 76                     type: 'value',
 77                     axisTick: {
 78                         show: false
 79                     },
 80                     axisLine: {
 81                         lineStyle: {
 82                             color: '#57617B'
 83                         }
 84                     },
 85                     axisLabel: {
 86                         margin: 10,
 87                         textStyle: {
 88                             fontSize: 14
 89                         }
 90                     },
 91                     splitLine: {
 92                         lineStyle: {
 93                             color: '#57617B'
 94                         }
 95                     }
 96                 }],
 97                 series: [{
 98                     name: '华为手机销量',
 99                     type: 'line',
100                     smooth: true,
101                     lineStyle: {
102                         normal: {
103                             width: 1
104                         }
105                     },
106                     areaStyle: {
107                         normal: {
108                             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
109                                 offset: 0,
110                                 color: 'rgba(219, 50, 51, 0.3)'
111                             }, {
112                                 offset: 0.8,
113                                 color: 'rgba(219, 50, 51, 0)'
114                             }], false),
115                             shadowColor: 'rgba(0, 0, 0, 0.1)',
116                             shadowBlur: 10
117                         }
118                     },
119                     itemStyle: {
120                         normal: {
121                             color: 'rgb(219,50,51)'
122                         }
123                     },
124                     data: [100,200,300,400,500,230,456,485,455,789,878,122]
125                 }, {
126                     name: '一加手机销量',
127                     type: 'line',
128                     smooth: true,
129                     lineStyle: {
130                         normal: {
131                             width: 1
132                         }
133                     },
134                     areaStyle: {
135                         normal: {
136                             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
137                                 offset: 0,
138                                 color: 'rgba(0, 136, 212, 0.3)'
139                             }, {
140                                 offset: 0.8,
141                                 color: 'rgba(0, 136, 212, 0)'
142                             }], false),
143                             shadowColor: 'rgba(0, 0, 0, 0.1)',
144                             shadowBlur: 10
145                         }
146                     },
147                     itemStyle: {
148                         normal: {
149                             color: 'rgb(0,136,212)'
150                         }
151                     },
152                     data: [456,789,155,455,664,744,122,366,856,666,111,323]
153                 }, ]
154             };
155             // 使用刚指定的配置项和数据显示图表。
156             myChart.setOption(option);
157     }  
158     </script>
159 </body>
160 
161 </html>
View Code

耐心、耐心……

posted @ 2018-03-29 16:07  郑叶叶  阅读(521)  评论(0)  编辑  收藏  举报