前面初步讲解了Echarts图表混搭的一些内容,这里再举一个例子继续说明echarts的图表混搭。下面先看图
由图可知，由左边的两个柱状图和右边的两个饼图共同组成了一个混搭的图表。左边的两个柱状图分别表示在线构建的各种不同图表的次数和各图表组件的使用次数。 从左上角的柱状图中可以看出，折线图、柱状图和饼图3种图表最为常用；从左下角的柱状图中可以看出，在各种图表组件中，使用较多的图表组件分别有标题组件（title）、提示组件（tooltip）、图例组件（legend）和直角坐标系组件（grid）。 右边的两个饼图分别表示各种ECharts版本的下载情况的统计分析和各种主题（Themes）下载情况的统计分析。
源代码如下：
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src='js/echarts.js'></script>
</head>
<body>
<div id="main" style="width: 800px; 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 waterMarkText = 'ECharts'; //设置水印的字符
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = 100;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.globalAlpha = 0.08;
ctx.font = '20px Microsoft Yahei'; //设置水印文字的字体
ctx.translate(50, 50); //设置水印文字的偏转值
ctx.rotate(-Math.PI / 4); //设置水印旋转的角度
ctx.fillText(waterMarkText, 0, 0); //设置填充水印
var option = { //指定图表的配置项和数据
backgroundColor: { type: 'pattern', image: canvas, repeat: 'repeat' },
tooltip: {},
title: [{ //配置标题组件
text: '在线构建次数',
subtext: '总计 ' + Object.keys(builderJson.charts).reduce(function (all, key) {
return all + builderJson.charts[key];
}, 0),
x: '25%',
textAlign: 'center'
}, { //配置标题组件
text: '各图表组件的使用次数',
subtext: '总计 ' + Object.keys(builderJson.components).reduce(function (all, key) {
return all + builderJson.components[key];
}, 0),
x: '25%', y: '53%',
textAlign: 'center'
}, {
text: '各版本下载',
subtext: '总计 ' + Object.keys(downloadJson).reduce(function (all, key) {
return all + downloadJson[key];
}, 0),
x: '75%', textAlign: 'center'
}, {
text: '主题下载',
subtext: '总计 ' + Object.keys(themeJson).reduce(function (all, key) {
return all + themeJson[key];
}, 0),
x: '75%', y: '50%',
textAlign: 'center'
}],
grid: [{ //配置网格组件
top: 50, width: '50%', bottom: '50%',
left: 10, containLabel: true
}, {
top: '55%', width: '50%',
bottom: 0, top:'60%', left: 10, containLabel: true
}],
xAxis: [{ //配置x轴坐标系
type: 'value',
max: builderJson.all,
splitLine: { show: false }
}, {
type: 'value',
max: builderJson.all,
gridIndex: 1,
splitLine: { show: false }
}],
yAxis: [{ //配置y轴坐标系
type: 'category',
data: Object.keys(builderJson.charts),
axisLabel: { interval: 0, rotate: 20 },
splitLine: { show: false }
}, {
gridIndex: 1,
type: 'category',
data: Object.keys(builderJson.components),
axisLabel: { interval: 0, rotate: 20 },
splitLine: { show: false }
}],
series: [{ //配置数据系列
type: 'bar', stack: 'chart', z: 3,
label: { normal: { position: 'right', show: true } },
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.charts[key];
})
}, {
type: 'bar', stack: 'chart', silent: true,
itemStyle: { normal: { color: '#eee' } },
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.all - builderJson.charts[key];
})
}, {
type: 'bar', stack: 'component', xAxisIndex: 1, yAxisIndex: 1, z: 3,
label: { normal: { position: 'right', show: true } },
data: Object.keys(builderJson.components).map(function (key) {
return builderJson.components[key];
})
}, {
type: 'bar', stack: 'component', silent: true,
xAxisIndex: 1, yAxisIndex: 1,
itemStyle: { normal: { color: '#eee' } },
data: Object.keys(builderJson.components).map(function (key) {
return builderJson.all - builderJson.components[key];
})
}, {
type: 'pie', radius: [0, '30%'], center: ['75%', '25%'],
data: Object.keys(downloadJson).map(function (key) {
return {
name: key.replace('.js', ''),
value: downloadJson[key]
}
})
}, {
type: 'pie', radius: [0, '30%'], center: ['75%', '75%'],
data: Object.keys(themeJson).map(function (key) {
return {
name: key.replace('.js', ''),
value: themeJson[key]
}
})
}]
};
myChart.setOption(option); //为echarts对象加载数据
</script>
</body>
</html>
