引言：随着图表的应用增多，很多echarts的配置你一定要知道，官网上的配置和案例都比较多，这里会介绍一些简单的配置，带你从0开始了解echarts的魅力
任何新技术的开始，都离不开文档
echarts官网：https://echarts.apache.org/zh/tutorial.html
关于如何进行引入使用，官网都讲的很清晰了
Documentation - Apache ECharts
可以按照例子，进行简单的了解图表
1.组件
echarts都是组件的形式出现，官网上面有一张图很简单的展示了实例中各个组件
每个组件都有自己的属性，可以根据自己想要的实现的样式进行组件属性的选择，每一个echarts都是由数据，x轴y轴，提示文本，标题等等组成，不同的echarts只需要写不同配置
Documentation - Apache ECharts
2.配置项详解
配置项，也就是option，每个图表都有自己的option，option配置不同，图表的出来的样式就各不相同，每一配置项最好自己在文档去找相关介绍
(1)基本配置项
关于图表基本的配置项一般就是，坐标的位置，背景，标题
(1)图的背景，标题，容器位置
let option = {
backgroundColor: "#fff", //图表背景色
title: { //图表的标题
text: "echarts",
textStyle: { //文本样式
color: "#333",
fontSize: "14",
},
},
grid: { //图表在一个容器div中的位置
left: "4%",
right: "18%",
bottom: "10%",
top: "22%",
containLabel: true, //grid 区域是否包含坐标轴的刻度标签。
},
};(2) 关于x轴(xAxis)和y轴(yAxis)配置项
轴的配置项的属性都是差不多的，最常见的属性，show(是否显示),splitNumber(分隔)
xAxis: [
{
type: "category", //坐标轴类型 （value, category, time, log）
boundaryGap: false,
name: "月份",
nameTextStyle: {
color: "#fff",
fontSize: 14,
},
axisLine: { //坐标轴轴线相关设置。数学上的x轴
show: true,
lineStyle: {
color: "#0d2e41",
},
},
axisLabel: { //坐标轴刻度标签的相关设置
textStyle: {
color: "#fff",
// padding: 16,
fontSize: 14,
},
formatter: function (data) {
return data;
},
},
splitLine: { //分割线
show: true,
lineStyle: {
color: "#152437",
},
},
axisTick: { //坐标轴刻度相关
show: false,
},
data: xData, //x轴的数据
},
]
（3）tooltip-提示框
tooltip: {
show: true, //是否展示
trigger: "item", //展示方式
formatter(params) { //自定义展示模式
return `<div style="color:#47C1FF;border:none !imporant;">${params.value}</div>`;
},
position: "top",
padding: 0,
borderColor: "transparent",
backgroundColor: "transparent",
},4.series - series是一个数组，一个坐标系可能会展示多个图表，series就是配置图表在坐标中的类型等
配置项就简单的介绍到这，配置项-Documentation - Apache ECharts
官网的每一个配置项都讲解的很详细，只是某些文字可能描述的不太明白，可以根据需求自己去尝试，配置项只需要大致了解就好了，了解之后对功能需求就会上手很快
3.常见echarts的功能配置
经常都会配置许多相似的图表，比如渐变色等等，下面总结了一些常见的配置项
(1) 网格背景
- 配置xAxis与yAxis的splitLine,调整样式颜色等，代码如配置项中的xAxis
(2) 渐变色
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(25,163,223,.3)",
},
{
offset: 1,
color: "rgba(25,163,223, 0)",
},
],
false
)①折线图的渐变色
②柱状图的渐变色
(3) 折线图的转点标记
(4)虚线圆
这个图是有两个圆形组合而成，虚线圆是怎么来的呢？
{
type: "pie",
zlevel: 3,
silent: true,
radius: ["73%", "74%"],
label: {
normal: {
show: false,
},
},
labelLine: {
normal: {
show: false,
},
},
data: pie(),
}
}
pie() { //虚线数据
let dataArr = [];
for (var i = 0; i < 100; i++) {
if (i % 2 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 25,
itemStyle: {
normal: {
color: "#07646a",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)",
},
},
});
} else {
dataArr.push({
name: (i + 1).toString(),
value: 20,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)",
},
},
});
}
}
return dataArr;
}(5)提示文本循环显示
利用dispaAction进行动态设置提示文本
startInterVal(mychart, yData) {
le tindex = 0;
this.timeId = setInterval(() => {
//使得tootip每隔三秒自动显示
mychart.dispatchAction({
type: "showTip", // 根据 tooltip 的配置项显示提示框。
seriesIndex: 0,
dataIndex: index,
});
index++;
if (index === yData.length) {
index = 0;
}
}, 3000);
},（6）一定宽度溢出显示省略号
width: 100,
overflow: 'truncate',
ellipsis: '...' 
4. vue将一个图表进行封装
<template>
<div class="wrap" :id="id"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
props: {
// DOMID
id: {
type: String,
default: 'chart-id-'+new Date().getTime()
},
// 数据
data: {
type: Array,
default: []
}
},
mounted(){
this.$nextTick(()=>{
this.initChart()
})
},
watch: {
data: {
deep: true,
handler: function(){
this.initChart()
}
}
},
methods: {
initChart(){
echarts.init(document.getElementById(this.id)).dispose()
let mychart = echarts.init(document.getElementById(this.id))
// 设置响应式
window.addEventListener('resize', function (){
mychart.resize()
})
let option = {}
// 挂载配置
mychart.setOption(option )
}
}
}
</script>
<style scoped>
.wrap{
width: 100%;
height: 100%;
}
</style>5 .例子
(1)环状
// 饼状图
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'
}
}
}
}
]
});(2)实现不同坐标系
效果图 - 网格图
利用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]
}
}
}
]
});（3）实现圆的文字的居中
效果图
利用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} <br/>{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: '搜索引擎' }
]
}
]
});（4）文字换行，渐变色， pictorialBar
function attackSourcesDataFmt(sData) {
var sss = [];
sData.forEach(function (item, i) {
let itemStyle = {
color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i],
};
sss.push({
value: item,
itemStyle: itemStyle,
});
});
return sss;
}
let option = {
grid: {
left: '10%',
right: '15%',
bottom: '15%',
top: '15%',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'value',
name: '单位/万元',
axisLine: {
show: true
},
splitLine: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
},
nameTextStyle: {
color: 'rgba(230,243,255, 0.8)'
},
axisLabel: {
interval: "auto",
textStyle: {
color: 'rgba(230,243,255,0.8)',
fontSize: 12
},
},
},
yAxis: [{
type: 'category',
inverse: true,
axisLabel: {
show: true,
textStyle: {
color: 'rgba(230,243,255,0.8)'
},
formatter: function (params) {
console.log(params)
return params.length > 9 ? `${params.substring(0, 6) + '\n' + params.substring(6)}` : params
}
},
axisTick: {
show: false,
},
splitLine: {
show: false
},
axisLine: {
show: true
},
data: this.xData
},],
series: [{
name: '',
type: 'bar',
zlevel: 1,
itemStyle: {
normal: {
barBorderRadius: 0,
color: (params) => {
return colorList[params.dataIndex]
}
},
},
barBorderRadius: [4, 24, 3, 4],
barWidth: 20,
data: attackSourcesDataFmt(data)
},
{
name: '头部1',
type: 'pictorialBar',
z: 20,
label: {
show: true,
position: 'right'
},
data: [
{
value: 50,
symbol: 'path://M 0 0 L 6 0 L 0 10 L -6 10 z',
symbolSize: [16, 20],
symbolOffset: [8, 0],
symbolPosition: 'end',
itemStyle: {
color: 'rgb(24, 144, 255)'
},
},
{
value: 60,
symbol: 'path://M 0 0 L 6 0 L 0 10 L -6 10 z',
symbolSize: [16, 20],
symbolOffset: [8, 0],
symbolPosition: 'end',
itemStyle: {
color: 'rgb(0, 233, 255)'
},
}, {
value: 70,
symbol: 'path://M 0 0 L 6 0 L 0 10 L -6 10 z',
symbolSize: [16, 20],
symbolOffset: [8, 0],
symbolPosition: 'end',
itemStyle: {
color: 'rgb(34, 230, 205)'
},
}, {
value: 20,
symbol: 'path://M 0 0 L 6 0 L 0 10 L -6 10 z',
symbolSize: [16, 20],
symbolOffset: [8, 0],
symbolPosition: 'end',
itemStyle: {
color: 'rgb(24, 144, 255)'
},
},
]
}
]
};(1)文字换行
formatter: function (params) {
console.log(params)
return params.length > 9 ? `${params.substring(0, 6) + '\n' + params.substring(6)}` : params
}formatter是一个函数 - 可以对文本进行处理，最后return一个格式
return的也可以是一个html
(2)颜色
对于data颜色的配置，如果是都是相同颜色只需要统一配置，颜色不同，需要配置要每一个data里面
(3)symbol
对于这种不规则图形结尾的，可以采用拼接的方式，利用pictorialBar(象形柱图)
symbol - 官网提供了一些规则图形 - 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
-自定义图片（'image://http://example.website/a/b.png'）
-可以通过 'path://' 将图标设置为任意的矢量路径
path路径是怎么画的?
M表示moveto， L s 表示lineto s ， z表示closepath
以三角形为例
symbol: 'path://M 0 0 L 100 100 L 300 100 L 200 300 z',
以案例为例
symbol: 'path://M 0 0 L 6 0 L 0 10 L -6 10 z',
总结，echarts图表是由很多组件进行组合而成，根据官网查看对应组件的配置，完成自己想要的图形效果,后续想到了在补充
最后给大家推荐一个echarts常用网站 - EChartsDemo集
码字不容易，点个赞吧！
扫一扫
2004
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
