1.柱状图
function echartBar(data) {
var charts = echarts.init(document.getElementById('articleTotal-echart'));
var option = {
width: 800,
height: 180,
grid: {
x: 35,
y: 24,
borderWidth: 1
},
xAxis: {
type: 'category',
data: (function () {
var res = [];
// var len = data.length;
for (var i = 0, size = 10; i < size; i++) {
res.push({
value: data[i].name
});
}
return res;
})(),
axisLine: {
lineStyle: {
color: "#BAE3FF",
}
},
axisLabel: {
interval: 0, //横轴信息全部显示
formatter: function (value) {
var ret = ""; //拼接加\n返回的类目项
var maxLength = 5; //每项显示文字个数
var valLength = value.length; //X轴类目项的文字个数
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
if (rowN > 1) //如果类目项的文字大于3,
{
for (var i = 0; i < rowN; i++) {
var temp = ""; //每次截取的字符串
var start = i * maxLength; //开始截取的位置
var end = start + maxLength; //结束截取的位置
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
temp = value.substring(start, end) + "\n";
ret += temp; //凭借最终的字符串
}
return ret;
} else {
return value;
}
}
}
},
yAxis: {
name: "(W)",
nameLocation: 'end',
nameGap: 10, //与轴线间距
type: 'value',
axisLine: {
lineStyle: {
color: "#BAE3FF",
}
},
axisTick: {
show: false
},
splitLine: {
show: false
},
splitNumber: 4
},
series: [{
data: (function () {
var res = [];
// var len = data.length;
for (var i = 0, size = 10; i < size; i++) {
res.push({
value: data[i].articlesCount
});
}
return res;
})(),
type: 'bar',
barWidth: 30,
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: "#BAE3FF",
fontSize: 16
}
},
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // 柱状图颜色渐变
offset: 0,
color: '#1F32A3'
}, {
offset: 1,
color: '#2376FF'
}]),
}
},
}]
};
charts.setOption(option);
}
柱状图例子
-
进度水球
额外引入 echarts-liquidfill.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>绘制水球进度</title>
<style>
#liquid {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="liquid"></div>
<script src="./js/echarts4.0.3.min.js"></script>
<script src="./js/echarts-liquidfill.js"></script>
<script>
var charts = echarts.init(document.getElementById("liquid"));
var option = {
series: [{
type: 'liquidFill',
data: [0.5], // 0~1之间百分比
radius: '80%',
}]
};
charts.setOption(option);
</script>
</body>
</html>
绘制水球
未完待续。。。
