你的位置:首页 > 网页设计

[网页设计]ECharts 在同一个页面添加多个图表


<!DOCTYPE html><head><meta charset="utf-8"><title>ECharts</title></head><body><!-- 为ECharts准备一个具备大小(宽高)的Dom --><div id="barMain" ></div><div id="lineMain" ></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>  

  如下: