1.实现的效果
2.引用Echarts
本地:<script src="../lib-v3/echarts/echarts.min.js"></script>
在线:<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
3.Html页面
<div class="chart-1" id="test" style="width:800px;height:400px;"> </div>
4.封装插件
.factory('chartFactory', function () {
var service = {
xjData:xjData
};
return service;
/**
*echart图表封装函数,矩形图,支持最大支持一组12个矩形不同颜色
* @ labelData, 实例ID数组
* @ XArr, X轴数据
*@ YArr, Y轴数据
*@ divId,图表所在DIV的ID
*@ titleText ,Y轴标题
*@ ubtext ,Y轴标题
*@ unit ,Y轴单位刻度
*/
function xjData(labelData, XArr, YArr, divId, titleText, subtext,unit) {
var lineColor = ['#3C72C4', '#DD2292', '#F79709', '#2BD56F', '#666699',];
var seriesDataArr = [];
var countFor = 0;
for (var i = 0; i < labelData.length; i++) {
var seriesObj = {
name:labelData[i],//y轴上的鼠标事件显示
type: 'bar',
data: YArr[i],//y轴数据
itemStyle: {
normal:{
color: function (params){
var colorList = ['#3C72C4','#DD2292','#F79709','#ffc032','#2BD56F','#f47e39','#4D2292','#879709','#f0c032','#9BD56F','#147e39','#947e39'];
return colorList[params.dataIndex];
}
},
},
};
seriesDataArr.push(seriesObj);
countFor++;
if (countFor == labelData.length) {
XJRequire(labelData, XArr, seriesDataArr, divId, titleText, subtext ,unit)
}
}
};
/**
*echart加载模块函数
* @ labelData, 实例ID数组
* @ XArr, X轴数据
*@ YArr, Y轴数据
*@ divId,图表所在DIV的ID
*@ titleText ,Y轴标题
*@ subtext ,Y轴标题
*@ unit ,Y轴单位刻度
*/
function XJRequire(labelData, XArr, seriesDataArr, divId, titleText, subtext,unit ) {
var option2 = {
title: {
text: titleText,//y轴大标题
subtext: subtext//y轴小标题
},
tooltip: {
show: true
},
/* legend: {
data: labelData//可以选择是否显示
},*/
grid: {
containLabel: true
},
calculable: true,
xAxis: [
{
type: 'category',
data: XArr //x轴坐标值
}
],
yAxis: [
{
type: 'value',
axisLabel : {
formatter: '{value}'+ unit//y轴单位刻度
}
}
],
series: seriesDataArr,
};
echarts.init(document.getElementById(divId)).setOption(option2, true);
}
})
5.调用Echarts
vm.Id = [];
vm.Id[0] = "深圳";
vm.x = [];
vm.x = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"];
vm.y = [];
vm.y[0] = [];vm.y[0] = [5, 8, 12, 10, 10, 35, 20, 40, 10, 10, 2,10];
chartFactory.xjData(vm.Id, vm.x, vm.y, 'test', "平均温度", '', '℃');
6.Echarts 插件下载,适用于本地加载Echarts图表插件
链接: https://pan.baidu.com/s/1GCM4H4E5F0L-ni4R5boIvQ 密码: w7pw