echarts版本折线图
生活随笔
收集整理的這篇文章主要介紹了
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耐心、耐心……
總結
以上是生活随笔為你收集整理的echarts版本折线图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 利用SCVMM 2012 R2来管理Az
- 下一篇： Java 内部类示例