Echarts作图之柏拉图
生活随笔
收集整理的這篇文章主要介紹了
Echarts作图之柏拉图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Echarts版本：2.2.7
?
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="echarts/echarts.js"></script><script type="text/javascript">window.onload = function() {require(['echarts','echarts/chart/bar','echarts/chart/line',], function(ec) {var chartDom = document.getElementById("dv");console.log(chartDom);var myChart = ec.init(chartDom);var colors=["red","blue","green","black","orange","purple"]option = {title: {text: '測試',},tooltip: {trigger: 'axis',axisPointer: { // 坐標軸指示器，坐標軸觸發有效type: 'shadow' // 默認為直線，可選為：'line' | 'shadow'},formatter: function(params) {return params[0].name + '<br/>' +params[0].seriesName + ' : ' + params[0].value + '<br/>' +params[1].seriesName + ' : ' + (params[1].value + params[0].value);}},legend: {selectedMode: false,data: ['Acutal', 'Forecast']},toolbox: {show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },restore: { show: true },saveAsImage: { show: true }}},calculable: true,xAxis: [{type: 'category',data: ['top1', 'top2', 'top3', 'top4', 'top5', 'top6'],splitLine:false//data:[]},{type: 'category',show:false,boundaryGap : false,data: ['Cosco', 'CMA', 'APL', 'OOCL', 'Wanhai', 'Zim',"333"],splitLine:false}],yAxis: [{type: 'value',boundaryGap: [0, 0.1],splitLine:false},{type: 'value',name: '溫度',axisLabel: {formatter: '{value} %'},splitLine:false}],series: [{name: 'Acutal',type: 'bar',//barGap:'10%',barCategoryGap: '0%',itemStyle: {normal: {color: function(obj){if(obj.dataIndex>=0){return colors[obj.dataIndex];}},barBorderColor: 'tomato',barBorderWidth: 1,barBorderRadius: 2,label: {show: true,position: 'insideTop'}}},data: [300, 200, 180, 150, 120, 50]},{name: 'Forecast',type: 'line',xAxisIndex: 1,yAxisIndex: 1,data: [0, 30,50, 68, 83, 95,100 ]}]};myChart.setOption(option);})}</script> </head><body><div id="dv" style="width:900px;height: 600px"></div> </body></html>
轉載于:https://www.cnblogs.com/gebizhuifenren/p/7747798.html
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的Echarts作图之柏拉图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql中用HEX和UNHEX函数处理
- 下一篇： 可持续化线段树