Echars
一、Echars的使用
官网 https://www.echartsjs.com/api.html#echarts
- 在h5界面上留下echars要进行展示的位置
<div class="chart-b" id="week-line"></div>
- 获取数据,按照x轴数据,y轴数据分开存储,如果是和日期等和顺序有关的数据请尽量在后台完成排序,前台尽量只负责展示,减少前端负担
var xData = [];
var yData = [];
- 初始化echars,在h5界面上留下echars要进行展示的位置
var kbChart = echarts.init(document.getElementById('month-line'));
- 定义规则
Option{
参考案例
}
- 加载echars,简单的echars已经画好了
kbChart.setOption(Option);
- 如果需要回调方法请参见API
二、echars案例
function loadMonthEchars(echarsData) { //传入的是json数组
// 库表折线图
var xData = []; //x轴数据
var yDate= []; //y轴数据
for(var i = 0;i < echarsData.length; i++){ //赋值
xData .push(echarsData[i].update_time); //修改属性
yData .push(echarsData[i].data_count);
}
var kbChart = echarts.init(document.getElementById('month-line'), 'theme'); //初始化
var kbOption = { //定义规则
title: {
text: '上月数据汇总', //主标题
textStyle:{
color:'#0DB9F2', //颜色
fontStyle:'normal', //风格
fontWeight:'normal', //粗细
fontFamily:'Microsoft yahei', //字体
fontSize:20, //大小
align:'center' //水平对齐
}
},
tooltip: {
trigger: 'axis',
position: function (pt) {
return [pt[0], '10%'];
}
},
grid: {
left: 40,
right: 40,
bottom: 75,
top: 30
},
calculable : true,
xAxis : [
{
type : 'category',
axisLabel: {
color: "#194296" //刻度线标签颜色
},
boundaryGap : false,
data : timeData
}
],
yAxis : [
{
type : 'value',
splitLine:false,
axisLabel: {
color: "#194296" //刻度线标签颜色
},
/*data : ['0','20','40','60','80','100']*/
}
],
dataZoom: [{
type: 'inside',
start: 0,
end: 50,
bottom: 10
}, {
start: 0,
end: 50,
handleSize: '100%',
bottom: 10,
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}],
series : [
{
name:'数据总量',
type:'line',
color:'#d5d073',
smooth:true,//设置折线图平滑
data : allCount
}
]
};
kbChart.setOption(kbOption);
}
三.使用echars时,div隐藏导致图表加载echars默认大小问题
在css中不要设置div隐藏,负责会导致echars加载默认宽度100px,在js的文本就绪事件中完成echars隐藏即可解决