在ECharts的图表混搭中，一个图表包含唯一图例、工具箱、数据区域缩放 模块、值域漫游模块和一个直角坐标系，直角坐标系可包含一条或多条类目轴线、一条或多条值轴线，类目轴线和值轴线最多上下左右共4条。 ECharts中支持任意图表的混搭，其中常见的图表混搭有折线图与柱状图的混搭、折线图与饼状图的混搭等。
利用ECharts各图表的在线构建次数、各图表组件的使用次数、各版本下载和各主题下载情况的数据绘制柱状图与饼图混搭图表
由图可知，由左边的两个柱状图和右边的两个饼图共同组成了一个混搭的图表。左边的两个柱状图分别表示在线构建的各种不同图表的次数和各图表组件的使用次数。 从左上角的柱状图中可以看出，折线图、柱状图和饼图3种图表最为常用；从左下角的柱状图中可以看出，在各种图表组件中，使用较多的图表组件分别有标题组件（title）、提示组件（tooltip）、图例组件（legend）和直角坐标系组件（grid）。 右边的两个饼图分别表示各种ECharts版本的下载情况的统计分析和各种主题（Themes）下载情况的统计分析
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 ECharts 文件 -->
<script src="echarts.js"></script>
<title>5-2 柱状图与饼图混搭图</title>
</head>
<body>
<div id="main" style="width: 880px; height: 750px"></div>
<script type="text/javascript">
//基于准备好的dom，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
var builderJson = {
"all": 10887,
"charts": { //各ECharts图表的json数据
"地理坐标图": 3237, "路径图": 2164, "柱状图": 7561, "折线图": 7778,
"饼图": 7355, "散点图": 2405, "K线图": 1842, "雷达图": 2090,
"热力图": 1762, "矩形树图": 1593, "关系图": 2060, "盒须图": 1537,
"平行坐标系": 1908, "仪表盘图": 2107, "漏斗图": 1692, "桑基图": 1568
},
"components": { //各ECharts组件的json数据
"地理坐标系组件": 2788, "标题组件": 9575, "图例组件": 9400,
"提示组件": 9466, "直角坐标系组件": 9266, "图表标注组件": 3419,
"图表标线组件": 2984, "时间线组件": 2739, "区域缩放组件": 2744,
"视觉映射组件": 2466, "工具框组件": 3034, "极坐标系组件": 1945
},
//"ie": 9743没效果
};
var downloadJson = { //各ECharts版本下载的json数据
"完整版": 17365, "精简版": 4079,
"常用版": 6929, "源代码版": 14890
};
var themeJson = { //各ECharts下载的主题json数据
"黑色主题": 1594, "信息主题": 925, "明亮主题": 1608,
"罗马主题": 721, "马卡龙主题": 2179, "复古主题": 1982
};
var waterMarkTex
最低0.47元/天 解锁文章
扫一扫
1573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
