ECharts简单使用
代码（ECharts工具类）
/**
* Created by Administrator on 2017/8/16.
*/
// 柱状图
function createBarChart(widthNum, heightNum, chartId, eTitle, eSubTitle, eLegend, exAxis, eyAxis, myStore) {
var rotate = 0;
if (exAxis.length > 6) {
rotate = 25;
}
return Ext.create('Ext.panel.Panel', {
border: false,
layout: {
align: 'center',
pack: 'center',
type: 'vbox'
},
items: [
{
xtype: 'panel',
align: 'center',
html: '<div id="' + chartId + '" style="width: ' + widthNum + 'px;height: ' + heightNum + 'px"></div>',
listeners: {
afterRender: function () {
// 初始化echarts
var barChart = echarts.init(document.getElementById(chartId));
// 显示加载
barChart.showLoading({
text: 'Loading',//显示加载中的文字
effect: 'spin',//加载中的显示样式
textStyle: {
fontSize: 20
}
});
// 指定图表的配置项和数据
var optionBar = {
// 标题
title: {
text: eTitle,
subtext: eSubTitle,
x: 'center'
},
// 提示
tooltip: {
trigger: 'axis',
axisPointer: { //坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为'line' | 'shadow'| 'cross'
}
},
// 边框
grid: {
left: '3%',
right: '5%',
bottom: '9%',
containLabel: true
},
// 图例
legend: {
orient: 'horizontal',
x: 'center',
y: 'bottom',
data: eLegend
},
// 工具箱，每个图表最多仅有一个工具箱
toolbox: {
show: true,
feature: {
saveAsImage: {show: true}, //保存图片
restore: {show: true} // 还原
}
},
// 是否启用拖拽重计算特性，默认关闭
calculable: false,
// 直角坐标系中横轴数组
xAxis: [
{
type: 'category',
data: exAxis,
axisLabel: {
interval: 0,
rotate: rotate //设置倾斜
}
}
],
// 直角坐标系中纵轴数组
yAxis: [
{
type: 'value',
name: eyAxis,
position: 'left'
}
],
// 驱动图表生成的数据内容数组
series: myStore
};
// 注销加载
barChart.hideLoading();
// 使用刚指定的配置项和数据显示图表
barChart.setOption(optionBar);
}
}
}
]
});
}
// 饼状图
function createPieChart(widthNum, heightNum, chartId, eTitle, eSubTitle, eColor, eLegend, eName, eData) {
return Ext.create('Ext.panel.Panel', {
border: false,
layout: {
align: 'center',
pack: 'center',
type: 'vbox'
},
items: [
{
xtype: 'panel',
align: 'center',
html: '<div id="' + chartId + '" style="width: ' + widthNum + 'px;height: ' + heightNum + 'px"></div>',
listeners: {
afterRender: function () {
// 初始化echarts
var pieChart = echarts.init(document.getElementById(chartId));
// 显示加载
pieChart.showLoading({
text: 'Loading',//显示加载中的文字
effect: 'spin',//加载中的显示样式
textStyle: {
fontSize: 20
}
});
// 指定图表的配置项和数据
var optionPie = {
// 标题
title: {
text: eTitle,
subtext: eSubTitle,
x: 'left'
},
// 提示
tooltip: {
trigger: 'item',
formatter: "{a}<br/>{b}:{c}({d}%)"
},
// 边框
grid: {
left: '3%',
right: '5%',
bottom: '9%',
containLabel: true
},
//设置饼图的颜色
color: eColor,
// 图例
legend: {
x: 'center',
y: 'bottom',
data: eLegend
},
// 工具箱，每个图表最多仅有一个工具箱
toolbox: {
show: true,
feature: {
saveAsImage: {show: true}, //保存图片
restore: {show: true} // 还原
}
},
// 是否启用拖拽重计算特性，默认关闭
calculable: false,
// 驱动图表生成的数据内容数组
series:{
name: eName,
type: 'pie',
selectedMode: 'single',
radius: ['0', '40%'],
label: {
normal: {
formatter: "{b}: {c} ({d}%)"
}
},
data: eData
}
};
// 注销加载
pieChart.hideLoading();
// 使用刚指定的配置项和数据显示图表
pieChart.setOption(optionPie);
}
}
}
]
});
}
// 条形图
function createBarItemChart(widthNum, heightNum, chartId, eTitle, eSubTitle, eLegend, exAxis, eyAxis, myStore) {
return Ext.create('Ext.panel.Panel', {
border: false,
layout: {
align: 'center',
pack: 'center',
type: 'vbox'
},
items: [
{
xtype: 'panel',
align: 'center',
html: '<div id="' + chartId + '" style="width: ' + widthNum + 'px;height: ' + heightNum + 'px"></div>',
listeners: {
afterRender: function () {
// 初始化echarts
var barItemChart = echarts.init(document.getElementById(chartId));
// 显示加载
barItemChart.showLoading({
text: 'Loading',//显示加载中的文字
effect: 'spin',//加载中的显示样式
textStyle: {
fontSize: 20
}
});
var seriesLabel = {
normal: {
show: true,
textBorderColor: '#333',
textBorderWidth: 2
}
};
// 指定图表的配置项和数据
var optionBarItem = {
// 标题
title: {
text: eTitle,
subtext: eSubTitle,
x: 'center'
},
// 提示
tooltip: {
trigger: 'axis',
axisPointer: { //坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为'line' | 'shadow'| 'cross'
}
},
// 边框
grid: {
left: '3%',
right: '5%',
bottom: '9%',
containLabel: true
},
// 图例
legend: {
orient: 'vertical',
x: 'right',
y: 'center',
data: eLegend
},
// 工具箱，每个图表最多仅有一个工具箱
toolbox: {
show: true,
feature: {
saveAsImage: {show: true}, //保存图片
restore: {show: true} // 还原
}
},
// 是否启用拖拽重计算特性，默认关闭
calculable: false,
// 直角坐标系中横轴数组
xAxis: [
{
type: 'value',
boundaryGap: [0, 0.01],
name: eyAxis
}
],
// 直角坐标系中纵轴数组
yAxis: [
{
type: 'category',
inverse: true,
data: exAxis
}
],
// 驱动图表生成的数据内容数组
series: myStore
};
// 注销加载
barItemChart.hideLoading();
// 使用刚指定的配置项和数据显示图表
barItemChart.setOption(optionBarItem);
}
}
}
]
});
}
// 折线图
function createLineChart(widthNum, heightNum, chartId, eTitle, eSubTitle, eLegend, exAxis, eyAxis, myStore) {
return Ext.create('Ext.panel.Panel', {
border: false,
layout: {
align: 'center',
pack: 'center',
type: 'vbox'
},
items: [
{
xtype: 'panel',
align: 'center',
html: '<div id="' + chartId + '" style="width: ' + widthNum + 'px;height: ' + heightNum + 'px"></div>',
listeners: {
afterRender: function () {
// 初始化echarts
var lineChart = echarts.init(document.getElementById(chartId));
// 显示加载
lineChart.showLoading({
text: 'Loading',//显示加载中的文字
effect: 'spin',//加载中的显示样式
textStyle: {
fontSize: 20
}
});
// 指定图表的配置项和数据
var optionLine = {
// 标题
title: {
text: eTitle,
subtext: eSubTitle,
x: 'center'
},
// 提示
tooltip: {
trigger: 'axis',
},
// 边框
grid: {
left: '3%',
right: '5%',
bottom: '9%',
containLabel: true
},
// 图例
legend: {
x: 'center',
y: 'bottom',
data: eLegend
},
// 工具箱，每个图表最多仅有一个工具箱
toolbox: {
show: true,
feature: {
saveAsImage: {show: true}, //保存图片
restore: {show: true} // 还原
}
},
// 是否启用拖拽重计算特性，默认关闭
calculable: false,
// 直角坐标系中横轴数组
xAxis: [
{
type: 'category',
boundaryGap: false,
data: exAxis
}
],
// 直角坐标系中纵轴数组
yAxis: eyAxis,
// 驱动图表生成的数据内容数组
series: myStore
};
// 注销加载
lineChart.hideLoading();
// 使用刚指定的配置项和数据显示图表
lineChart.setOption(optionLine);
}
}
}
]
});
}