Project with a number of Echarts chart, due to the built-in properties too much, today made a summary of the bar chart, line chart styles, and rendering methods.
(1) Histogram
<div id="bookCount" style=" width: 500px;height: 500px;"></div>$(function () {
initbookStatusCount();
bookStatusCountajax();
});
var myChart;
function bookStatusCountajax() {
// -----异步加载数据-----
statusArr = ['简爱', '富兰克林自传', '假如给我三天光明', '百年孤独', '呐喊'];
arichdataArr = [10, 30, 80, 50, 5];
myChart.setOption({ //动态数据渲染
xAxis: [{
data: statusArr
}],
series: [{
data: arichdataArr
}]
});
};
function initbookStatusCount() {
statusArr = []; //数据初始值
arichdataArr = [];
myChart2 = echarts.init(document.getElementById('bookCount')); //初始Echarts实例
option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%', //设置echarts于canvas的相对位置
right: '4%',
top: '6%',
bottom: '12%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: statusArr, //x轴显示值
axisTick: { //是否显示x轴线的刻度
show: false
},
splitLine: { show: false },//去除垂直于x轴的网格线
axisLine: {
lineStyle: {
type: 'solid',
color: '#ff0',//x轴线的颜色
width: '0'//坐标线的宽度；当为0时，则隐藏x坐标轴
}
},
axisLabel: {
textStyle: {
color: '#cfcfcf',//坐标值得具体的颜色
}
}
}
],
yAxis: [
{
type: 'value',
name: '单位：件', //可用于标明统计单位
splitLine: {
show: false,
lineStyle: {
color: ['#002165'],
width: 1,
type: 'solid'
}
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#cfcfcf',
width: '0'
}
},
axisLabel: {
textStyle: {
color: '#cfcfcf'
}
}
}
],
series: [
{
name: '档案数量', //可用于显示统计目的
type: 'bar',
barWidth: '40%', //柱状图宽度
itemStyle: {
normal: {
color: function (params) { //柱状图颜色
var colorList = ['#3A97FF', '#A1CDFF',
'#3A97FF', '#A1CDFF',
'#3A97FF', '#A1CDFF',
'#3A97FF', '#A1CDFF',
'#3A97FF', '#A1CDFF'];
return colorList[params.dataIndex]
},
label: {
show: true, //显示柱状图统计数值
position: 'top', //显示在每根柱状图上方
textStyle: { //数值样式
color: '#cfcfcf',
fontSize: 12
}
},
barBorderRadius: [40, 40, 0, 0] //柱状角成椭圆形
},
},
data: arichdataArr //y轴数量
}
]
};
myChart.setOption(option);
};
window.onresize = function () { //设置统计图可自适应大小
myChart.resize();
}Figure:
(2) line graph - the data real-time rendering mode
<div id="data-monitor" style=" width: 500px;height: 500px;"></div>$(function () {
initHisMonitor();
getHisData();
setInterval(getHisData, 3000); //每3秒重新请求一次数据
});
var wdata = [],
sdata = [],
otherdata= [],
time = [];
var myChart;
function getHisData() {
app.get('数据请求地址', {}, function (msg) {
if (wdata.length < 100) { //限制显示的数据最大量
wdata.push(msg.row.data.wd);
sdata.push(msg.row.data.sd);
otherdata.push(msg.row.data.tvoc);
time.push(msg.msg);
} else {
wdata.shift();
sdata.shift();
otherdata.shift();
time.shift();
wdata.push(msg.row.data.wd);
sdata.push(msg.row.data.sd);
otherdata.push(msg.row.data.tvoc);
time.push(msg.msg);
}
myChart.setOption({
xAxis: [{
data: time
}],
series: [{
data: wdata
}, {
data: sdata
}, {
data: otherdata
}]
});
})
}
function initHisMonitor() {
myChart = echarts.init(document.getElementById("data-monitor"));
option = {
tooltip: { //悬浮提示框
trigger: 'axis',
axisPointer: {
animation: false
}
},
legend: { //统计图图例
data: [
{
name: '温度',
textStyle: {
color: '#FF7200'
},
icon: 'image://./images/icon1.png' //可以自定义图标，格式为'image://+icon文件地址'
},
{
name: '湿度',
textStyle: {
color: '#009CFF'
},
icon: 'image://./images/icon2.png'
},
{
name: '其他',
textStyle: {
color: '#00FFAE'
},
icon: 'image://./images/icon3.png'
}],
x: 'center', //图例位置
top: 90,
textStyle: {
color: '#53b0ff'
}
},
grid: { //统计图位置
x: '10%',
y: 120,
x2: 60,
y2: 40,
borderWidth: 1
},
xAxis: [{
type: 'category',
name: '时间',
boundaryGap: false, //坐标轴两边是否留白
data: time,
splitLine: { show: false },//去除垂直于x轴的网格线
axisLine: {
lineStyle: {
type: 'solid',
color: '#002165',//x轴线的颜色
width: '1'//坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: '#53b0ff',//坐标值的具体的颜色
}
}
}],
yAxis: [{
type: 'value',
splitLine: {
show: true,
lineStyle: {
color: ['#002165'],
width: 1,
type: 'solid'
}
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#53b0ff',
width: '0'
}
},
axisLabel: {
textStyle: {
color: '#53b0ff',
}
}
}],
series: [{
type: 'line',
name: '温度',
symbol: 'circle', //折线节点
symbolSize: '6', //折线节点大小
data: wdata,
itemStyle: {
normal: {
color: '#FF7200',
lineStyle: {
color: '#FF7200'
}
}
}
}, {
type: 'line',
name: '湿度',
symbol: 'circle',
symbolSize: '6',
data: sdata,
itemStyle: {
normal: {
color: '#009CFF',
lineStyle: {
color: '#009CFF'
}
}
}
}, {
type: 'line',
name: '其他',
symbol: 'circle',
symbolSize: '6',
data: otherdata,
itemStyle: {
normal: {
color: '#00FFAE',
lineStyle: {
color: '#00FFAE'
}
}
}
}]
};
myChart.setOption(option);
}Figure:
