本篇文章实现的是以下两种需求：
1，使用Echarts3实现柱状图；
2，使用Echarts3实现饼图；
包含Echarts使用过程中遇到的部分坑的解决办法。
先上效果图：
（PS：饼图实际上是圆的，以上图片是被压缩了）
进入正题，下面是具体实践：
图表实现使用的是Echarts，Echarts官网地址为：http://echarts.baidu.com/examples.html。
一，准备工作
1）获取Echarts
以下为官网推荐的几种获取 ECharts方式：
-
从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。开发环境建议下载源代码版本，包含了常见的错误提示和警告。
-
在 ECharts 的 GitHub 上下载最新的
release版本，解压出来的文件夹里的dist目录里可以找到最新版本的 echarts 库。 -
通过 npm 获取 echarts，
npm install echarts --save，详见“在 webpack 中使用 echarts”
2）引入Echarts
ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。
下载后使用script标签引入：
<script src="pages/asset/echarts.min.js"></script>
二，具体实现
以我的demo为例，直接贴代码吧。
1）使用到的样式
.canvas_pie_chart{
height: 90%;
width: 90%;
margin-left: 5%;
margin-right: 5%;
}
.asset_pie_back{
position: absolute;
width: 2rem;
height: 2rem;
top: 6.5rem;
left: 0.5rem;
z-index: 99;
display: none;
}
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="asset_chart_bar" style="width: 100%;height:90%;"></div>
<div id="asset_chart_pie" style="width: 100%;height:90%;"></div>
<img src="images/query/search_clear.png" class="asset_pie_back">
var assetStatics = function () {
var assetChartPie, assetChartBar, color_list;
function beforeInit(p) {
initData();
}
function init(p) {
// 基于准备好的dom，初始化echarts实例
assetChartPie = echarts.init(document.getElementById('asset_chart_pie'));
assetChartBar = echarts.init(document.getElementById('asset_chart_bar'));
$$('#asset_chart_pie').find("canvas").addClass('canvas_pie_chart');
bindEvent("on");
}
function destroy(p) {
bindEvent("off");
}
/*
* 获取数据
* */
function initData() {
color_list = ['#96CEEA', '#7BD6B1', '#4EA8F2', '#FF9566', '#F9E385', '#9C6448',
'#FFBC6C', '#9E96EA', '#9EEA42', '#A1B1BE', '#96CEEA', '#7BD6B1',
'#4EA8F2', '#FF9566', '#F9E385', '#9C6448', '#FFBC6C', '#9E96EA',
'#9EEA42', '#A1B1BE', '#96CEEA', '#7BD6B1', '#4EA8F2', '#FF9566',
'#F9E385', '#9C6448', '#FFBC6C', '#9E96EA', '#9EEA42', '#A1B1BE'];
}
/*
* 绑定事件
* */
function bindEvent(method) {
if (method == "on") {
/*
* 柱状图item项点击事件
* 从seriesId获取当前item项id，然后可根据此id获取需要的数据
* */
assetChartBar.on('click', function (params) {
// console.log(params);
var resource_ids = params.seriesId;
var item_index = params.dataIndex;
var resource_id = resource_ids.split(',')[item_index];
switchToPieChart(resource_id);
});
/*
* 饼状图返回按钮
* 返回到柱状图
* */
$$(document).on('click', '.asset_pie_back', function () {
$$('#asset_chart_bar').css("display", "block");
$$('#asset_chart_pie').css("display", "none");
$$('.asset_pie_back').css("display", "none");
});
assetChartPie.on('click', function (params) {
});
// 图例开关的行为只会触发 legendselectchanged 事件
assetChartPie.on('legendselectchanged', function (params) {
// 获取点击图例的选中状态
var isSelected = params.selected[params.name];
// 在控制台中打印
console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);
// 打印所有图例的状态
console.log(params.selected);
});
assetChartPie.on('legendselected', function (params) {
});
assetChartPie.on('legendunselected', function (params) {
});
}
}
/*
* 显示饼图
* */
function showPieChart(data) {
var option_pie_chart = {
// 全图默认背景
backgroundColor: 'rgba(0,0,0,0)',
// 默认色板
color: data.color_list,
// 图表标题
title: {
show: false,
x: 'center', // 水平安放位置，默认为左对齐，可选为：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
y: 45, // 垂直安放位置，默认为全图顶端，可选为：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
//textAlign: null // 水平对齐方式，默认根据x设置自动调整
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 标题边框颜色
borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
padding: 5, // 标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css
itemGap: 10, // 主副标题纵向间隔，单位px，默认为10，
textStyle: {
fontSize: 18,
fontWeight: 'bolder',
color: '#333' // 主标题文字颜色
},
subtextStyle: {
color: '#aaa' // 副标题文字颜色
},
text: data.title
},
// 图例
legend: {
orient: 'horizontal', // 布局方式，默认为水平布局，可选为：'horizontal' ¦ 'vertical'
x: 'center', // 水平安放位置，默认为全图居中，可选为：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
y: 'bottom', // 垂直安放位置，默认为全图顶端，可选为：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 图例边框颜色
borderWidth: 0, // 图例边框线宽，单位px，默认为0（无边框）
padding: 5, // 图例内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
// 横向布局时为水平间隔，纵向布局时为纵向间隔
itemWidth: 20, // 图例图形宽度
itemHeight: 14, // 图例图形高度
textStyle: {
color: '#333' // 图例文字颜色
},
data: data.detail
},
// 提示框
tooltip: {
trigger: 'item', // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
hideDelay: 100, // 隐藏延迟，单位ms
transitionDuration: 0.4, // 动画变换时间，单位s
backgroundColor: 'rgba(0,0,0,0.7)', // 提示背景颜色，默认为透明度为0.7的黑色
borderColor: '#333', // 提示边框颜色
borderRadius: 4, // 提示边框圆角，单位px，默认为4
borderWidth: 0, // 提示边框线宽，单位px，默认为0（无边框）
padding: 5, // 提示内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'line', // 默认为直线，可选为：'line' | 'shadow'
lineStyle: { // 直线指示器样式设置
color: '#48b',
width: 2,
type: 'solid'
},
shadowStyle: { // 阴影指示器样式设置
width: 'auto', // 阴影大小
color: 'rgba(150,150,150,0.3)' // 阴影颜色
}
},
textStyle: {
color: '#fff'
},
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
series: [
{
name: '植物分类统计',
type: 'pie',
center: ['50%', '50%'], // 默认全局居中
radius: ['40%', '55%'], //环
clockWise: false, // 默认逆时针
startAngle: 90,
minAngle: 0, // 最小角度改为0
selectedOffset: 10, // 选中是扇区偏移量
itemStyle: {
normal: {
// color: 各异,
borderColor: '#fff',
borderWidth: 1,
label: {
show: true,
position: 'outer'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
labelLine: {
show: true,
length: 20,
lineStyle: {
// color: 各异,
width: 1,
type: 'solid'
}
}
},
emphasis: {
// color: 各异,
borderColor: 'rgba(0,0,0,0)',
borderWidth: 1,
label: {
show: true,
position: 'outer'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
labelLine: {
show: true,
length: 20,
lineStyle: {
// color: 各异,
width: 1,
type: 'solid'
}
}
}
},
data: data.detail
}
]
};
assetChartPie.showLoading();
//调整饼图参数
option_pie_chart = adjustPieChartOption(data, option_pie_chart);
assetChartPie.setOption(option_pie_chart, true);
assetChartPie.hideLoading();
}
/*
* 显示柱状图
* */
function showBarChart(data) {
var option_bar_chart = {
// 全图默认背景
backgroundColor: 'rgba(0,0,0,0)',
// 默认色板
color: data.color_list,
// 图表标题
title: {
show: false,
x: 'center', // 水平安放位置，默认为左对齐，可选为：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
y: 'top', // 垂直安放位置，默认为全图顶端，可选为：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
//textAlign: null // 水平对齐方式，默认根据x设置自动调整
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 标题边框颜色
borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
padding: 5, // 标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css
itemGap: 10, // 主副标题纵向间隔，单位px，默认为10，
textStyle: {
fontSize: 18,
fontWeight: 'bolder',
color: '#333' // 主标题文字颜色
},
subtextStyle: {
color: '#aaa' // 副标题文字颜色
},
text: data.title
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'line', // 默认为直线，可选为：'line' | 'shadow'
label: {
show: false
}
}
},
calculable: true,
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: data.x_axis,
axisTick: {
alignWithLabel: true
},
axisLabel: {
formatter: function (val) {
//x轴标签文字纵向排列，解决x轴标签过长时，柱状图部分item项不显示
return val.split("").join("\n");
}
}
}
],
yAxis: [
{
name: '树木数',
type: 'value'
}
],
dataZoom: [
{
//是否显示左侧收缩提示条
show: false,
start: 0,
end: 100
},
{
type: 'inside',
start: 0,
end: 100
},
{
//是否显示右侧收缩提示条
show: false,
yAxisIndex: 0,
filterMode: 'empty',
width: 30,
height: '80%',
showDataShadow: false,
left: '93%'
}
],
series: [
{
name: '植物数',
type: 'bar',
center: ['50%', '50%'], // 默认全局居中
barWidth: '25%',
barMaxWidth: 25,//最大宽度
data: data.y_axis,
id: data.id_arr,
itemStyle: {
//修改颜色
normal: {
color: function (params) {
return data.color_list[params.dataIndex]
},
//bar上显示的提示信息
label: {
show: true,
position: 'top',
formatter: '{c}'
}
}
}
}
]
};
assetChartBar.showLoading();
//调整柱状图参数
option_bar_chart = adjustBarChartOption(data, option_bar_chart);
//注意此处：echarts默认为merge，以下setOption会导致数据组合呈现，会同时显示本次和上次的数据
// assetChartBar.setOption(option_bar_chart);
//设置为true即可只使用新数据
assetChartBar.setOption(option_bar_chart, true);
assetChartBar.hideLoading();
}
/*
* 根据当前所选切换表格视图
* */
function switchChartView(type) {
if (type == 'bar') {
switchToBarChart();
} else {
switchToPieChart();
}
}
/*
* 切换到柱状图视图
* */
function switchToBarChart(data) {
$$('#asset_chart_bar').css("display", "block");
$$('#asset_chart_pie').css("display", "none");
$$('.asset_pie_back').css("display", "none");
assembleDataForBarChart(data, function (bar_data) {
console.log(bar_data);
showBarChart(bar_data);
});
}
/*
* 切换到饼状图视图
* */
function switchToPieChart(data) {
$$('#asset_chart_bar').css("display", "none");
$$('#asset_chart_pie').css("display", "block");
$$('.asset_pie_back').css("display", "block");
assembleDataForPieChart(data, function (pie_data) {
console.log(pie_data);
showPieChart(pie_data);
});
}
/*
* 为饼图组装数据
* 假数据
* */
function assembleDataForPieChart(data, _callback) {
var pie_detail = [
{
name: '椰树',
value: 85
},
{
name: '榕树',
value: 156
},
{
name: '桂花树',
value: 684
},
{
name: '菠萝蜜',
value: 48
},
{
name: '木棉树',
value: 62
},
{
name: '四季树',
value: 37
},
{
name: '其他',
value: 76
}
];
var pie_data = {
title: '分类统计',
color_list: color_list,
detail: pie_detail
}
_callback(pie_data);
}
/*
* 为柱状图组装数据
* 假数据
* */
function assembleDataForBarChart(data, _callback) {
var bar_id_arr = ['0_1', '0_2', '0_3', '0_4', '0_5', '0_6', '0_7', '0_8', '0_9', '0_10', '0_11', '0_12'];
var bar_x_arr = ['园区1', '园区2', '园区3', '园区4', '园区5', '园区6', '园区7', '园区8', '园区9', '园区10', '园区11', '园区12'];
var bar_y_arr = [895, 652, 485, 785, 123, 584, 74, 555, 256, 888, 777, 520];
var bar_data = {
title: '植物统计',
color_list: color_list,
id_arr: bar_id_arr,
x_axis: bar_x_arr,
y_axis: bar_y_arr
};
_callback(bar_data);
}
/*
* 根据柱状图item项数量调整柱状图显示参数(柱状图item宽度、显示X轴item项显示数量、柱状图item项颜色等)
* 避免柱状图item项太少时柱状图item项宽度太大，柱状图item项太多时柱状图item项宽度太小，难看
* 这里是简单测试，可根据需求自行调整
* */
function adjustBarChartOption(data, option) {
var count = data.x_axis.length;
//柱状图item宽度
var percent_show = 100;
if (count < 11) {
percent_show = 100;
} else if (count > 10 && count < 21) {
percent_show = percent_show * 0.8;
option.series[0].barWidth = '40%';
} else if (count > 20 && count < 31) {
percent_show = percent_show * 0.45;
option.series[0].barWidth = '50%';
} else {
percent_show = percent_show * 0.3;
option.series[0].barWidth = '60%';
//预置色数组长度不够用
var color_list = [];
for (var i = 0; i < count; i++) {
color_list[i] = '#96CEEA';
}
//设置柱状图item项颜色
option.color = color_list;
}
//设置柱状图X轴显示的item项数量
option.dataZoom[0].end = percent_show;
option.dataZoom[1].end = percent_show;
return option;
}
/*
* 根据饼图item项调整饼图参数(饼图圆心位置)
* 避免饼图item项太多时，legend和饼图重叠
* 这里是简单测试，可根据需求自行调整
* */
function adjustPieChartOption(data, option) {
var count = data.detail.length;
//饼图圆心高度
var percent_location = '45%';
if (count == 0) {
percent_location = '50%';
option.color = ['#BFBFBF'];
option.series[0].data = {name: '', value: 0};
option.series[0].itemStyle.normal.show = true;
option.legend.data = {name: '', value: 0};
option.legend.show = false;
} else if (count > 0 && count < 11) {
percent_location = '40%';
} else if (count > 10 && count < 21) {
percent_location = '35%';
} else if (count > 20 && count < 31) {
percent_location = '30%';
} else {
percent_location = '30%';
//预置色数组长度不够用
var color_list = [];
for (var i = 0; i < count; i++) {
color_list[i] = '#96CEEA';
}
//设置饼图item项颜色
option.color = color_list;
}
//设置饼图圆心高度
option.series[0].center[1] = percent_location;
return option;
}
return {
beforeInit: beforeInit,
init: init,
destroy: destroy,
switchChartView: switchChartView
}
}();4) 使用
1，在页面初始化时如下调用，初始化图表相关
assetStatics.beforeInit();
assetStatics.init();2，需要显示图标时如下调用
assetStatics.switchChartView('bar');
三，写在后面
1）以上为项目前期技术调研时写的demo，非常简陋，勿喷。后面实际项目中做了不少优化处理（包括样式、关联逻辑、异常处理等），欢迎交流讨论；
2）已在以上代码注释中体现了部分坑的解决办法，后面实际项目中还遇到了些坑并都已解决，马上要下班了，在这里就不写出来了，后面有空也许会完善。各位亲碰到了问题的话可以在评论里留言，说不定你遇到的坑我也遇到过；
扫一扫
3797
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
