100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 基于Echarts的HTML5 Canvas折线图柱状图DEMO演示

基于Echarts的HTML5 Canvas折线图柱状图DEMO演示

时间:2023-11-10 10:53:07

相关推荐

基于Echarts的HTML5 Canvas折线图柱状图DEMO演示

HTML代码:

<div id="barChart" style="height: 400px;width:600px;background:white;margin:20px 0 0;"></div>

JavaScript代码 :

var barChart = {title: {text: '折柱混合图'},dataZoom: {type:'inside',//slider//orient:'horizontal'//vertical},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {color: '#999'}}},toolbox: {feature: {dataView: {show: true, readOnly: false},magicType: {show: true, type: ['line', 'bar']},restore: {show: true},saveAsImage: {show: true}}},legend: {//x:'left',data:['蒸发量','降水量']},xAxis: [{type: 'category',data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],axisPointer: {type: 'shadow'}}],yAxis: [{type: 'value',name: '水量',min: 0,max: 250,interval: 50,axisLabel: {formatter: '{value} ml'}}],series: [{name:'蒸发量',type:'bar',//stack: '总量',label: {normal: {show: true,position: 'top'}},data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]},{name:'降水量',type:'bar',//stack: '总量',label: {normal: {show: true,position: 'top'}},data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]}]};//初始化echarts实例var myBarChart = echarts.init(document.getElementById('barChart'));//使用制定的配置项和数据显示图表myBarChart.setOption(barChart);

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。