背景
近期开发工作中涉及到大量的图表展示功能，主要使用echart3绘图应用于大屏展示中，总的来说echart3还是比较容易上手的，本文整理几个实用用法，如饼图三环，线形图，柱状图渐变色，作为网上笔记，以备后用。
饼图三环效果
效果图：
实现难点：
-
标题居中； 2.三环效果
- 标题居中比较简单，为了达到文字放于饼图中心效果，我们将title调整显示位置来达到目的。title: {x: ‘center’, y: ‘37%’…}
title: { text: '性别分布', // subtext: '纯属虚构', x: 'center', // 标题X轴位置 y: '37%', // 标题Y轴位置 textStyle: { fontWeight: 'normal', //标题颜色 color: '#FFFFFF', fontSize: echartConfig.fontSize } } - 三环效果，echart3本身支持内外两环设置，如下:
series: [{ name: '性别分布', type: 'pie', radius: ['50%','60%'], // 设置内环/外环大小 center: ['50%', '42%'],… 第三环由UI出图仅做展示用途。利用position: absolute; z-index: 10; 巧妙堆叠至echart报表之下，注意 z-index一定要低于图表。 ```
.pie-echart-mask { position: absolute; left: 135px; top: 33px; z-index: 1001; width: 115px; height: 115px; background: url(../img/big/pie-bg-9c88e322cf.png); background-size: 115px 115px; }
坐标轴图表问题总结
1.柱状图/线形图 x/y轴数据未显示完全，通过设宽宽度，缩放图例
#div_chajian_yuanzhu { height: 120px; width: 480px; position: absolute; left: -63px; bottom: 15px; -webkit-transform: scale(.7,1); }
2.删除网格
xAxis: [ { splitLine: {show: false},//去除网格线 …
3.轴线文字竖排
xAxis: [
{
splitLine: {show: false},//去除网格线
axisLabel: { //调整x轴的lable
interval: 0, //X轴信息全部显示;
textStyle: {
fontSize: 12,
color: ‘#fff’,
},
formatter: function (value) {
//x轴的文字改为竖版显示
var str = value.split(“”);
return str.join(“\n”);
// return ‘{a|’ + value + ‘}’;
}
},
…
4.网格内容位置调整，（实际图表内容）
grid: {
left: '1%',
right: '1%',
top: '10%',
bottom: '14%',
containLabel: true
}, ``` 5.渐变色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#0E92A1'
}, {
offset: 1,
color: '#0A5B94'
}])
附：完整饼图示例
var demoOption = {
title: {
text: 'demo',
// subtext: '纯属虚构',
x: 'center',
y: '44%',
textStyle: {
fontWeight: 'normal', //标题颜色
color: '#FFFFFF',
fontSize: 14
}
},
series: [
{
name: '消费用途',
type: 'pie',
radius: ['39%', '47%'],
center: ['50%', '50%'],
// label: {
// normal: {
// // formatter: '{b}:{c}: ({d}%)',
// textStyle: {
// fontWeight: 'normal',
// fontSize: 10,
// color: echartConfig.commonEchartColor
// }
// }
// },
labelLine: {
normal: {
length: 25
}
},
data: [{value: "80%", name: "男"}, {value: "20%", name: "女"}], // 实际饼图
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
color: ['#5E86EB', '#3764D1', '#1740AB', '#3462D8', '#2759D5', '#1945B4', '#3655CE', '#183FA9', '#1D46AC', '#224396']
}
],
};
附2：柱状图
var zhuzhuangDemo= {
title: {
text: '柱状图demo',
// subtext: '纯属虚构',
x: 'right',
y: 'bottom',
textStyle: {
fontWeight: 'normal', //标题颜色
color: "#fff",
fontSize: 10
}
},
tooltip: {
formatter: function (params, vals) {
var val = params[0].name + ' : \n' + params[0].data * 1000000
return val
},
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '1%',
right: '1%',
top: '10%',
bottom: '14%',
containLabel: true
},
xAxis: [
{
splitLine: {show: false},//去除网格线
axisLine: {
lineStyle: {
color: 'rgba(0, 0, 0, 0)'
}
},
label: {
position: 'insideRight'
},
type: 'category',
axisLabel: { //调整x轴的lable
interval: 0, //X轴信息全部显示;
textStyle: {
fontSize: 12,
color: "#fff"
},
formatter: function (value) {
//x轴的文字改为竖版显示
var str = value.split("");
return str.join("\n");
// return '{a|' + value + '}';
}
},
data: num1,
axisTick: {
alignWithLabel: false
}
}
],
yAxis: [
{
splitLine: {show: false},//去除网格线
axisLine: {
lineStyle: {
color: 'rgba(0, 0, 0, 0)'
}
},
type: 'value',
axisLabel: { //调整x轴的lable
formatter: '{value} 百万',
// rotate: -45, //文字逆时针旋转45°
textStyle: {
fontSize: 10,
color: "#fff"
}
},
}
],
series: [
{
name: '分布',
type: 'bar',
barWidth: '50%',
data: [{name: '北京', value: '232144789'},{name: '上海', value: '789124823'},{name: '南京', value: '123478789123'}],
itemStyle: {
normal: {
fontSize: 8,
//颜色渐变
color: '#215ADD'
}
}
}
]
};