1、echarts简介
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
2、使用案例
第一步：echarts初始化
第二步：定义option,
第三步：echarts加载option
echarts初始化:
var right_bottom_chart = echarts.init(document.getElementById("right_bottom"));
定义option
var getLBOptionConfig = function(data_res, monthArr , index){
var data_arr = getDataArr(data_res);
right_bottom_option = {
baseOption:{
timeline:{
axisType :'category',
orient:'vertical',
autoPlay :true,
playInterval :15000,
right: '5',
left:'320',
top:'0',
bottom:'0',
label:{
interval:0,
formatter: function (item) {
var str = item.split("-")[1];
return parseInt(str)+'月';
}
},
data:monthArr,
currentIndex : index,
controlStyle:{
showPlayBtn :false
}
}
},
options:[
{
title: {
text: '租赁人口',
textStyle:{
color:'#fff'
}
},
textStyle:{
color:'#B3E4A1'
},
grid: {
},
angleAxis: {
type: 'category',
data: cities,
axisLabel:{
show:true,
interval : 0
}
},
radiusAxis: {
},
polar: {
},
tooltip: {
show: true,
formatter: function (params) {
var id = params.dataIndex;
return cities[id] + '<br>最低：' + data_arr[id][0] + '<br>最高：' + data_arr[id][1] + '<br>平均：' + data_arr[id][2];
}
},
series: [{
type: 'bar',
itemStyle: {
normal: {
color: 'transparent'
}
},
data: data_arr.map(function (d) {
return d[0];
}),
coordinateSystem: 'polar',
stack: '最大最小值',
silent: true
}, {
type: 'bar',
data: data_arr.map(function (d) {
return d[1] - d[0];
}),
coordinateSystem: 'polar',
name: '价格范围',
stack: '最大最小值'
}, {
type: 'bar',
itemStyle: {
normal: {
color: 'transparent',/*设置bar为隐藏，撑起下面横线*/
}
},
data: data_arr.map(function (d) {
return d[2];
}),
coordinateSystem: 'polar',
stack: '均值',
silent: true,
barGap: '-100%',
z: 10
}, {
type: 'bar',
itemStyle: {
normal: {
color: 'green',/*设置bar为隐藏，撑起下面横线*/
}
},
data: data_arr.map(function (d) {
return 8;
}),
coordinateSystem: 'polar',
name: '均值',
stack: '均值',
barGap: '-100%',
z: 10
}]
}]
}
right_bottom_option.options=[];
monthArr.forEach(function(n){
right_bottom_option.options.push(getTemplate(data_arr));
});
return right_bottom_option;
};
echarts加载option:
right_bottom_chart.setOption(LBoption,true);
时间轴代码片：
timeline:{
axisType :'category',
orient:'vertical',
autoPlay :true,
playInterval :15000,
right: '5',
left:'320',
top:'0',
bottom:'0',
label:{
interval:0,
formatter: function (item) {
var str = item.split("-")[1];
return parseInt(str)+'月';
}
},
data:monthArr,
currentIndex : index,
controlStyle:{
showPlayBtn :false
}
}
时间轴时间监听：
right_bottom_chart.on('timelinechanged', function (timeLineIndex) {
var month_str = monthArr[timeLineIndex.currentIndex];
if(month_str){
loadRightBottomCON(right_bottom_chart, month_str, timeLineIndex.currentIndex);
}
});
抽取模板
var getTemplate = function(data_arr){
return {
title: {
text: '租赁人口',
textStyle:{
color:'#fff'
}
},
textStyle:{
color:'#B3E4A1'
},
grid: {
},
angleAxis: {
type: 'category',
data: cities,
axisLabel:{
show:true,
interval : 0
}
},
radiusAxis: {
},
polar: {
},
tooltip: {
show: true,
formatter: function (params) {
var id = params.dataIndex;
return cities[id] + '<br>最低：' + data_arr[id][0] + '<br>最高：' + data_arr[id][1] + '<br>平均：' + data_arr[id][2];
}
},
series: [{
type: 'bar',
itemStyle: {
normal: {
color: 'transparent'
}
},
data: data_arr.map(function (d) {
return d[0];
}),
coordinateSystem: 'polar',
stack: '最大最小值',
silent: true
}, {
type: 'bar',
data: data_arr.map(function (d) {
return d[1] - d[0];
}),
coordinateSystem: 'polar',
name: '价格范围',
stack: '最大最小值'
}, {
type: 'bar',
itemStyle: {
normal: {
color: 'transparent',/*设置bar为隐藏，撑起下面横线*/
}
},
data: data_arr.map(function (d) {
return d[2];
}),
coordinateSystem: 'polar',
stack: '均值',
silent: true,
barGap: '-100%',
z: 10
}, {
type: 'bar',
itemStyle: {
normal: {
color: 'green',/*设置bar为隐藏，撑起下面横线*/
}
},
data: data_arr.map(function (d) {
return 8;
}),
coordinateSystem: 'polar',
name: '均值',
stack: '均值',
barGap: '-100%',
z: 10
}]
};
}
挥一挥衣袖，不带走一片云彩