关于echarts那些事儿
引言：随着图表的应用增多，很多echarts的配置你一定要知道，官网上的配置和案例都比较多，这里会介绍一些简单的配置
echarts官网：https://echarts.apache.org/zh/tutorial.html
1.组件
echarts都是组件的形式出现，官网上面有一张图很简单的展示了实例中各个组件
每个组件都有自己的属性，可以根据自己想要的实现的样式进行组件属性的选择
// 饼状图
function barChart({
title,
num,
ratio,
isshowRatio = true,
fontSizeTitle = '14',
fontSizeNum = '14',
fontSizeRatio = '18',
colorTitle = '#c7dbf5',
colorNum = '#00d6d3',
colorRatio = '#00d6d3',
lineColor = ['#0d9dbb', '#4afacc'],
topTitle = '70%',
leftTitle = '43%',
leftNum = '43%',
topNum = '83%',
imgUrl,
imgWidth,
imgHeight,
leftImg = 'center',
topImg = 'center'
} = params) {
var placeHolderStyle = {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: "rgba(0,0,0,0)",
borderWidth: 0
},
emphasis: {
color: "rgba(0,0,0,0)",
borderWidth: 0
}
};
var dataStyle = {};
if (isshowRatio) {
dataStyle['normal'] = {
formatter: '{c}%',
position: 'center',
show: true,
textStyle: {
fontSize: fontSizeRatio,
fontWeight: 'normal',
color: colorRatio,
display: 'none'
}
}
}
var option = {
backgroundColor: '', //设置整个echarts的背景色
title: [ //文字文本，可以设置文本的位置，样式等
{
text: title,
left: leftTitle,
top: topTitle,
textAlign: 'center',
textStyle: {
fontWeight: 'normal',
fontFamily: 'youshe',
fontSize: fontSizeTitle,
color: colorTitle,
textAlign: 'center',
},
},
{
text: num,
left: leftNum,
top: topNum,
textAlign: 'center',
textStyle: {
fontWeight: 'normal',
fontFamily: 'youshe',
fontSize: fontSizeNum,
color: colorNum,
textAlign: 'center',
},
}
],
//第一个图表
series: [
{ //数组构成，每一个对象由type决定图表类型
type: 'pie', //饼状
hoverAnimation: false, //鼠标经过的特效
radius: ['75%', '100%'], //饼状图的半径
center: ['50%', '50%'], //半径对应的圆点
startAngle: 225, //开始角度
label: {
show: false
},
data: [{
value: 100,
itemStyle: {
normal: {
color: '#041632',
}
},
},
{
value: 35,
itemStyle: placeHolderStyle,
},
]
},
// 上层环形配置
{
type: 'pie',
hoverAnimation: false, //鼠标经过的特效
radius: ['75%', '100%'],
center: ['50%', '50%'],
startAngle: 225,
data: [{
value: ratio,
itemStyle: {
normal: {
color: {
type: 'linear',
colorStops: [{
offset: 0,
color: lineColor[0] // 0% 处的颜色
},
{
offset: 1,
color: lineColor[1] // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
},
label: dataStyle,
},
{
value: 135 - ratio,
itemStyle: placeHolderStyle,
},
]
},
],
};
if (imgUrl) {
var graphic = {
elements: [{
type: 'image',
style: {
image: imgUrl,
width: imgWidth,
height: imgHeight
},
left: leftImg,
top: topImg
}]
}
}
option['graphic'] = graphic;
return option
}
2.实现线性渐变色
效果图：
实现主要配置 - 根据itemStyle,areaStyle属性设置
this.echartDie.setOption({
title: {
// text: 'ECharts 入门示例'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#000'
}
}
},
grid: {
top: 10,
left: 60,
right: 60
},
legend: {
bottom: 0
}, // 显示数据
xAxis: {
type: 'category',
name: '单位(天)',
boundaryGap: false,
data: [0, 5, 10, 15, 20]
},
yAxis: {
type: 'value',
min: 0,
max: 100,
splitNumber: 4,
interval: 25,
axisLabel: {
formatter: '{value} %'
}
},
series: [
{
data: [5, 100, 20, 45, 65],
type: 'line',
name: '实际使用量',
smooth: true,
itemStyle: {
normal: {
color: '#23a4f5',
lineStyle: {
color: '#23a4f5'
}
}
}, // 线条样式
areaStyle: {
normal: {
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#c2e7ff80'
},
{
offset: 1,
color: '#ffffff80'
}
])
}
}
},
{
data: [0, 25, 50, 75, 100],
type: 'line',
name: '理想适用度',
smooth: true,
itemStyle: {
normal: {
color: '#43d3c2',
lineStyle: {
type: 'dashed',
color: '#43d3c2'
}
}
}
}
]
});
3.实现不同坐标系
效果图 - 网格图
利用splitLine实现网格，boundaryGap实现数据显示位置，居中还是在坐标系上
this.echartsDou.setOption({
title: {
// text: 'ECharts 入门示例'
},
// 鼠标移入提示文本
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#000'
}
}
},
// 网格信息
grid: {
top: 20,
left: 60,
right: 20,
default: '#ccc'
},
legend: {
bottom: 0
}, // 显示数据
xAxis: [
{
type: 'category',
boundaryGap: false, // 数据显示位置
data: [0, 10, 20, 35, 40, 50, 60],
axisLabel: {
formatter: '{value}M'
},
// name: '流量分段',
// 网格样式
splitLine: {
show: true,
lineStyle: {
color: '#ebebeb',
width: 1,
type: 'solid'
}
}
},
{
boundaryGap: '50%',
type: 'category',
boundaryGap: true,
show: false,
// 数据显示位置
data: [10, 20, 35, 40, 50, 60],
axisLabel: {
formatter: '{value}M'
},
// 网格样式
splitLine: {
show: true,
lineStyle: {
color: '#ebebeb',
width: 1,
type: 'solid'
}
}
}
],
yAxis: {
type: 'value',
min: 0,
max: 4000,
splitNumber: 4,
interval: 1000,
// 网格样式
splitLine: {
show: true,
lineStyle: {
color: '#ebebeb',
width: 1,
type: 'solid'
}
}
},
series: [
{
data: [3500, 1000, 2000, 4000, 3200, 2500, 1200],
type: 'line',
name: '实际使用量',
smooth: true,
itemStyle: {
normal: {
color: '#8084D9',
lineStyle: {
color: '#8084D9'
}
}
} // 线条样式
},
{
data: [1200, 2020, 1520, 820, 2000, 4100],
name: '月平均DOU',
xAxisIndex: 1,
type: 'bar',
barWidth: '20',
// barCategoryGap: '100',
itemStyle: {
normal: {
color: '#23a4f5',
barBorderRadius: [4, 4, 0, 0]
}
}
}
]
});4.实现圆的文字的居中
效果图
利用title地位，和graphic定位实现
this.echartsAnalyse.setOption({
title: {
text: 5,
x: 'center',
y: 'center',
top: 150,
left: 470,
textStyle: {
fontSize: 20,
color: 'black',
fontWeight: 800
}
},
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
graphic: {
type: 'text',
left: '435px',
top: '185px',
// left: 'center',
// top: 'center',
z: 2,
zlevel: 100,
style: {
text: '总流量池(个)',
textAlign: 'center',
fill: '#333',
width: 100,
height: 30,
fontSize: 16
}
},
color: ['#23a4f5', '#3cd1c0', '#ebdc52', '#ffa53b', '#8084d9'],
legend: {
orient: 'vertical',
icon: 'circle',
// left: 10,
right: 700,
top: 20,
bottom: 20,
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
// name: '访问来源',
type: 'pie',
radius: ['60%', '78%'],
center: ['30%', '53%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
itemStyle: {
normal: {
borderWidth: 5,
borderColor: '#fff'
}
},
emphasis: {
label: {
show: false, // 中间不显示默认字体
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
]
}
]
});
总结，echarts图表是由很多组件进行组合而成，根据官网查看对应组件的配置，完成自己想要的图形效果