Heim >Web-Frontend >HTML-Tutorial >ECharts 在同一个页面添加多个图表_html/css_WEB-ITnose
ECharts 在同一个页面添加多个图表_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:582685Durchsuche
<!DOCTYPE html><head><meta charset="utf-8"><title>ECharts</title></head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="barMain" style="height:400px"></div><div id="lineMain" style="height:400px"></div><!-- ECharts单文件引入 --><script src="http://echarts.baidu.com/build/dist/echarts.js"></script><script type="text/javascript">// 路径配置require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' }});// 使用require( [ 'echarts', 'echarts/chart/bar', 'echarts/chart/line' ], drawEcharts);function drawEcharts(ec){ drawBar(ec); drawLine(ec);}function drawBar(ec){ var myBarChart = ec.init(document.getElementById('barMain')); var option = { tooltip: { show: true }, legend: { data:['销量'] }, xAxis : [ { type : 'category', data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] } ], yAxis : [ { type : 'value' } ], series : [ { "name":"销量", "type":"bar", "data":[5, 20, 40, 10, 10, 20] } ]};myBarChart.setOption(option,true); //当setOption第二个参数为true时，会阻止数据合并}function drawLine(ec){ var myLineChart = ec.init(document.getElementById('lineMain')); var option2 = { title : { text: '未来一周气温变化', subtext: '纯属虚构' }, tooltip : { trigger: 'axis' }, legend: { data:['最高气温','最低气温'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value', axisLabel : { formatter: '{value} °C' } } ], series : [ { name:'最高气温', type:'line', data:[11, 11, 15, 13, 12, 13, 10], markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : { data : [ {type : 'average', name: '平均值'} ] } }, { name:'最低气温', type:'line', data:[1, -2, 2, 5, 3, 2, 0], markPoint : { data : [ {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5} ] }, markLine : { data : [ {type : 'average', name : '平均值'} ] } } ] };myLineChart.setOption(option2,true); }</script></body> 如下：
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：index.css_html/css_WEB-ITnoseNächster Artikel：html页面高度自适应_html/css_WEB-ITnose