好文章 记得收藏+点赞+关注额 ！！！
---- Nick.Peng
一、Echarts图表制作准备工作
- 引入Echarts.js
- 分别为饼图和柱状图指定 Dom 大小
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>饼&柱混搭图表</title> </head> <body> <div> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <!-- 1. 饼状图Dom --> <div id="main1" style="width: 500px;height:500px;"></div> <!-- 2. 柱状图Dom --> <div id="main2" style="width: 500px;height:420px;"></div> </div> <!-- 引入 echarts.js --> <script src="js/echarts.js"></script> </body> </html>
二、给饼图和柱状图增加配置项
- 分别对饼图和柱状图进行配置
<script type="text/javascript"> // 指定饼状图图表的配置项和数据 var option1 = { // 图表标题 title : { text: '某站点用户访问来源', // 标题内容 subtext: '纯属虚构', x:'center' // 居中显示 }, // 鼠标触发提示 tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" // 展示格式 }, // 图例 legend: { orient : 'vertical', // 垂直显示 x : 'left', // 显示位置--左上 data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, calculable : true, series : [ { name:'访问来源', type:'pie', radius : '55%', center: ['50%', 225], data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ] } ] }; // 指定柱状图图表的配置项和数据 var option2 = { tooltip : { trigger: 'axis', axisPointer : { // 指示器类型，shadow为阴影指示器 type: 'shadow' } }, legend: { data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, // 工具栏组件 toolbox: { show : true, orient : 'vertical', top : 'center', feature : { mark : {show: true}, // 启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式） magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']}, restore : {show: true}, // 是否支持配置项还原 saveAsImage : {show: true} // 保存图片 } }, calculable : true, xAxis : [ { type : 'category', data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value', splitArea : {show : true} } ], grid: { x2:40 }, series : [ { name:'直接访问', type:'bar', stack: '总量', data:[320, 332, 301, 334, 390, 330, 320] }, { name:'邮件营销', type:'bar', stack: '总量', data:[120, 132, 101, 134, 90, 230, 210] }, { name:'联盟广告', type:'bar', stack: '总量', data:[220, 182, 191, 234, 290, 330, 310] }, { name:'视频广告', type:'bar', stack: '总量', data:[150, 232, 201, 154, 190, 330, 410] }, { name:'搜索引擎', type:'bar', stack: '总量', data:[820, 932, 901, 934, 1290, 1330, 1320] } ] }; </script>
三、分别画饼图和柱状图
- 初始化两个 echarts 实例
- 分别按照指定配置项展示图表
<script> // 对饼状图dom，初始化echarts实例 var myChart1 = echarts.init(document.getElementById('main1')); myChart1.setOption(option1); // 按option1展示myChart1图表 // 对柱状图dom，初始化echarts实例 var myChart2 = echarts.init(document.getElementById('main2')); myChart2.setOption(option2); </script>
四、配置两个图表样式 ------ 显示在一行
- 默认两个图表垂直方向显示，添加
float属性，让其显示在一行<head> <meta charset="utf-8"> <title>饼&柱混合图</title> <style> /* 配置样式让两个图表显示在一行 */ div{float: left} </style> </head>
五、实现多图联动
- 使用 connect 方法将 myChart1 和 myChart2 进行关联，实现多图联动
<script> ...... // 将myChart1和myChart2关联起来 echarts.connect([myChart1, myChart2]) ...... </script> - 多图联通效果如下：
六、完整源代码
-
可作为模板，使用时只需要修改其中的配置项即可
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>饼&柱混搭图表</title> <style> /* 配置样式让两个图表显示在一行 */ div{float: left} </style> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div> <!-- 饼状图Dom --> <div id="main1" style="width: 500px;height:500px;"></div> <!-- 柱状图Dom --> <div id="main2" style="width: 500px;height:420px;"></div> </div> <!-- 引入 echarts.js --> <script src="js/echarts.js"></script> <script type="text/javascript"> // 指定饼状图图表的配置项和数据 var option1 = { // 图表标题 title : { text: '某站点用户访问来源', // 标题内容 subtext: '纯属虚构', x:'center' // 居中显示 }, // 鼠标触发提示 tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" // 展示格式 }, // 图例 legend: { orient : 'vertical', // 垂直显示 x : 'left', // 显示位置--左上 data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, calculable : true, series : [ { name:'访问来源', type:'pie', radius : '55%', center: ['50%', 225], data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ] } ] }; // 指定柱状图图表的配置项和数据 var option2 = { tooltip : { trigger: 'axis', axisPointer : { // 指示器类型，shadow为阴影指示器 type: 'shadow' } }, legend: { data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, // 工具栏组件 toolbox: { show : true, orient : 'vertical', top : 'center', feature : { mark : {show: true}, // 启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式） magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']}, restore : {show: true}, // 是否支持配置项还原 saveAsImage : {show: true} // 保存图片 } }, calculable : true, xAxis : [ { type : 'category', data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value', splitArea : {show : true} } ], grid: { x2:40 }, series : [ { name:'直接访问', type:'bar', stack: '总量', data:[320, 332, 301, 334, 390, 330, 320] }, { name:'邮件营销', type:'bar', stack: '总量', data:[120, 132, 101, 134, 90, 230, 210] }, { name:'联盟广告', type:'bar', stack: '总量', data:[220, 182, 191, 234, 290, 330, 310] }, { name:'视频广告', type:'bar', stack: '总量', data:[150, 232, 201, 154, 190, 330, 410] }, { name:'搜索引擎', type:'bar', stack: '总量', data:[820, 932, 901, 934, 1290, 1330, 1320] } ] }; // 对饼状图dom，初始化echarts实例 var myChart1 = echarts.init(document.getElementById('main1')); myChart1.setOption(option1); // 按option1展示myChart1图表 // 对柱状图dom，初始化echarts实例 var myChart2 = echarts.init(document.getElementById('main2')); myChart2.setOption(option2); // 将myChart1和myChart2关联起来 echarts.connect([myChart1, myChart2]) // 配置自动适应Windows窗口大小 setTimeout(function (){ window.onresize = function () { myChart.resize(); myChart2.resize(); } },200) </script> </body> </html>
完结。。。
