相信很多開發者會遇到開發數據顯示效果的狀況,這種狀況下echarts.js將成爲咱們很是好用的工具,下面就經過一個簡單的demo來了解一下它吧javascript
這是echarts.js的中文開發文檔地址http://echarts.baidu.com/option.html#xAxis.nameTextStylehtml
其運行代碼大體以下java
<body> <div id="main" style="height: 400px;width: 800px;"></div> </body> <script src="js/echarts.js"></script> <script type="text/javascript"> var myChart = echarts.init(document.getElementById("main")); myChart.title = '多 Y 軸示例'; var colors = ['#5793f3', '#d14a61', '#675bba']; // var colors = ['red', 'yellow', 'black']; var option = { color: colors, tooltip: { trigger: 'axis', //'item' 數據項圖形觸發,主要在散點圖,餅圖等無類目軸的圖表中使用。 //'axis' 座標軸觸發,主要在柱狀圖,折線圖等會使用類目軸的圖表中使用。 axisPointer: { type: 'cross', snap:true, } }, grid: { right: '20%' //設置grid 組件離容器右側的距離。 }, legend: { data:['蒸發量','降水量','平均溫度'] }, xAxis: [ { type: 'category', axisTick: { alignWithLabel: true,//能夠保證刻度線和標籤對齊 }, data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] } ], yAxis: [ { type: 'value', name: '蒸發量', min: 0, max: 250, position: 'right', axisLine: { lineStyle: { color: colors[0]//座標軸顏色 } }, axisLabel: { formatter: '{value} ml'//座標軸文字格式化 } }, { type: 'value', name: '降水量', min: 0, max: 250, position: 'right',//降水量的位置在右邊, offset: 80,//向右偏移 axisLine: { lineStyle: { color: colors[1]//座標軸顏色 } }, axisLabel: { formatter: '{value} ml' } }, { type: 'value', name: '溫度', min: 0, max: 25, position: 'left', axisLine: { lineStyle: { color: colors[2] } }, axisLabel: { formatter: '{value} °C' } } ], series: [ { name:'蒸發量', type:'bar', barCategoryGap:'50%', data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], }, { name:'降水量', type:'bar', yAxisIndex: 1, data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] }, { name:'平均溫度', type:'line', yAxisIndex: 2, data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2] } ] }; myChart.setOption(option); </script>
效果以下echarts
怎麼樣,效果不錯吧,這只是一個簡單的demo,歡迎大神交流溝通哈工具