1.此图报表相对于之前的柱状图，新颖难点在与应用zrender画图插件，引用时候需要注意。
2.准备阶段
下载zrender软件包，github地址为：https://github.com/ecomfe/zrender.git
下载解压后也就是zrender-master目录；
3.新建一个目录testddd，将js，echats，zrender所需要的文件都拷贝到这里
在testddd目录下新建一个zrender目录，将上一步解压后的zrender-master目录下的dist，src两个文件夹复制到新建的zrender目录下，
复制jquery需要js文件
复制echats需要的目录文件echats-2.2.7
效果图如下：
4.详细步骤
1.引入库文件：
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="echarts-2.2.7/build/dist/echarts.js"></script>
<script type="text/javascript" src="zrender/dist/zrender.js"></script>
2.引入echatjs，zrender需要文件的路径
// eharts图表需要的公共的路径配置
require.config({
paths: {
echarts: 'echarts-2.2.7/build/dist'
}
});
//zrender需要的公共的路径配置
require.config({
packages: [
{
name: 'zrender',
location: 'zrender/src',
main: 'zrender'
}
]
});
3.先加载zrender让其为数据元素配好颜色，itemstyles
4.再赋值加载图表数据函数
eport(colorList,itemStyle);//加载echats图表数据
5.具体代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>test</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="echarts-2.2.7/build/dist/echarts.js"></script>
<script type="text/javascript" src="zrender/dist/zrender.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// eharts图表需要的公共的路径配置
require.config({
paths: {
echarts: 'echarts-2.2.7/build/dist' //需要根据情况动态修改路径
}
});
//zrender需要的公共的路径配置
require.config({
packages: [
{
name: 'zrender',
location: 'zrender/src', //需要根据情况动态修改路径
main: 'zrender'
}
]
});
show();
});
function show(){
require.config({
packages: [
{
name: 'zrender',
location: 'zrender/src',
main: 'zrender'
}
]
});
require(
[
'zrender',
'zrender/animation/animation',
'zrender/shape/Circle',
'zrender/tool/color'
],
function(zrender, Animation, CircleShape,zrColor){
//
var colorList = [
'#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
'#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0'
];
var itemStyle = {
normal: {
color: function(params) {
if (params.dataIndex < 0) {
// for legend
return zrColor.lift(
colorList[colorList.length - 1], params.seriesIndex * 0.1
);
}
else {
// for bar
return zrColor.lift(
colorList[params.dataIndex], params.seriesIndex * 0.1
);
}
}
}
};
report(colorList,itemStyle);//加载echats图表数据
}
);
}
function report(colorList,itemStyle){
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载.
],
function(ec) {
var myChart = ec.init(document.getElementById('wechat_total'));
option = {
title: {
text: '2010-2013年中国城镇居民家庭人均消费构成（元）',
subtext: '数据来自国家统计局',
sublink: 'http://data.stats.gov.cn/search/keywordlist2?keyword=%E5%9F%8E%E9%95%87%E5%B1%85%E6%B0%91%E6%B6%88%E8%B4%B9'
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255,255,255,0.7)',
axisPointer: {
type: 'shadow'
},
formatter: function(params) {
// for text color
var color = colorList[params[0].dataIndex];
var res = '<div style="color:' + color + '">';
res += '<strong>' + params[0].name + '消费（元）</strong>'
for (var i = 0, l = params.length; i < l; i++) {
res += '<br/>' + params[i].seriesName + ' : ' + params[i].value
}
res += '</div>';
return res;
}
},
legend: {
x: 'right',
data:['2010','2011','2012','2013']
},
toolbox: {
show: true,
orient: 'vertical',
y: 'center',
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
restore: {show: true},
saveAsImage: {show: true}
}
},
calculable: true,
grid: {
y: 80,
y2: 40,
x2: 40
},
xAxis: [
{
type: 'category',
data: ['食品', '衣着', '居住', '家庭设备及用品', '医疗保健', '交通和通信', '文教娱乐服务', '其他']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '2010',
type: 'bar',
itemStyle: itemStyle,
data: [4804.7,1444.3,1332.1,908,871.8,1983.7,1627.6,499.2]
},
{
name: '2011',
type: 'bar',
itemStyle: itemStyle,
data: [5506.3,1674.7,1405,1023.2,969,2149.7,1851.7,581.3]
},
{
name: '2012',
type: 'bar',
itemStyle: itemStyle,
data: [6040.9,1823.4,1484.3,1116.1,1063.7,2455.5,2033.5,657.1]
},
{
name: '2013',
type: 'bar',
itemStyle: itemStyle,
data: [6311.9,1902,1745.1,1215.1,1118.3,2736.9,2294,699.4]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
});
}
</script>
</head>
<body>
<div id="wechat_total" style="width:800px;;height:600px;">
</div>
</div>
</body>
</html>
6.效果图：
