0.7 綜合 · php知識匯集

# 綜合應用 ****** * 實現靈活應用 * [在線演示](http://demo.sgfoot.com/ECharts/mix.html) >[info] 完整代碼 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>綜合</title> <script type="text/javascript" src="../asset/js/echarts.common.min.js"></script> <style> div{ display: inline-block; } </style> </head> <body> <div id="bar" style="width: 2000px;height:400px;"></div> <script> bar(); function bar() { var myChart = echarts.init(document.getElementById("bar")); // 指定圖表的配置項和數據 var data = new Array(); var data1 = new Array(); var data2 = new Array(); var num = new Array(); for(var i = 1;i < 1000; i++) { data.push(Math.ceil(Math.random()*100)); data1.push(Math.ceil(Math.random()*90)); data2.push(Math.ceil(Math.random()*80)); num.push(i); } var option = { title: { text: 'ECharts 矩形圖', subtext: '來自時光演示網', sublink: 'http://demo.sgfoot.com', left: 'center', textStyle: { color: '#2E3299' } }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' } } }, dataZoom: [ { type: 'slider', show: true, start: 94, end: 100, handleSize: 40 }, { type: 'inside', start: 94, end: 100 }, { type: 'slider', show: true, yAxisIndex: 0, filterMode: 'empty', width: 12, height: '70%', handleSize: 8, showDataShadow: false, left: '93%' } ], legend: { orient: 'vertical', left:'right', data:['瀏覽量', '銷量', 'view'], textStyle: { color: '#000' } }, xAxis: { data: num }, yAxis: {}, series: [{ name: '瀏覽量', type: 'line', data: data, label: { normal: { show: true, position: 'top' } } },{ name: '銷量', type: 'bar', data: data1, markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] } },{ name: 'view', type: 'bar', data: data2, markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] } }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); } </script> </body> </html> ~~~ ![](https://box.kancloud.cn/4ec3d927330b1bb447657af2c07c71ff_1838x420.png)