ECharts 在同一个页面添加多个图表_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:41:58
Original
2650 Leute haben es durchsucht

<!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} &deg;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>  
Nach dem Login kopieren

  如下:

  

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!