<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!-- 让IE浏览器用最高级内核渲染页面 有用 Chrome 框架的页面用webkit 内核 --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="Keywords" content="网站建设,网页设计"/> <meta name="Description" content="首页"/> <title></title> <meta name="renderer" content="webkit"> <!--Win8 or 10 --> <meta name="msapplication-TileImage" content="images/i/logo2.png"> <meta name="msapplication-TileColor" content="#e1652f"> <!--normal--> <link rel="icon" type="image/png" href=""> <body> <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript" src="js/echarts.js"></script> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 option = { title: { text: '折柱混合' }, 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: { 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' } }, { type: 'value', name: '温度', min: 0, max: 25, interval: 5, axisLabel: { formatter: '{value} °C' } } ], series: [ { name:'蒸发量', type:'bar', 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', 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] }, { name:'平均温度', type:'line', yAxisIndex: 1, data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2] }, { name:'月平均温度', type:'line', yAxisIndex:1, data:[1.0, 2.2, 3.3, 5.5, 4.3, 11.2, 21.3, 22.4, 21.0, 15.5, 11.0, 7.2] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
折线柱形混合统计图
最新推荐文章于 2023-12-21 21:22:08 发布