echats多系列彩虹柱状图的图表统计

本文主要是介绍echats多系列彩虹柱状图的图表统计，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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.引入库文件：

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();

});

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);
});