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.引入庫檔案:
<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.效果圖:
都看到這裡了,就順手點選右上角的小手,給個評論,再走唄!☺