【echarts实用技巧】echarts图表常用功能总结，折线图柱状图折柱混合【持续更新中】
主要用折线图和柱状图举例
1，X轴刻度信息日期自动排开：
我们获取一个日期的开始时间和结束时间，放上去会自动生成中间每一天的日期放在X轴上
把这两个函数放methods内。
getAll(begin, end) {
let arr1 = begin.split("-"); //这里可以换成/ 就2020/01/1 这种
let arr2 = end.split("-");
let arr1_ = new Date();
let arrTime = [];
arr1_.setUTCFullYear(arr1[0], arr1[1] - 1, arr1[2]);
let arr2_ = new Date();
arr2_.setUTCFullYear(arr2[0], arr2[1] - 1, arr2[2]);
let unixDb = arr1_.getTime();
let unixDe = arr2_.getTime();
for (let k = unixDb; k <= unixDe;) {
arrTime.push(this.datetimeparse(k, 'YY-MM-DD'));
k = k + 24 * 60 * 60 * 1000;
}
return arrTime;
},
// 时间格式处理
datetimeparse(timestamp, format, prefix) {
if (typeof timestamp == 'string') {
timestamp = Number(timestamp)
};
//转换时区
let currentZoneTime = new Date(timestamp);
let currentTimestamp = currentZoneTime.getTime();
let offsetZone = currentZoneTime.getTimezoneOffset() / 60; //如果offsetZone>0是西区，西区晚
let offset = null;
//客户端时间与服务器时间保持一致，固定北京时间东八区。
offset = offsetZone + 8;
currentTimestamp = currentTimestamp + offset * 3600 * 1000
let newtimestamp = null;
if (currentTimestamp) {
if (currentTimestamp.toString().length === 13) {
newtimestamp = currentTimestamp.toString()
} else if (currentTimestamp.toString().length === 10) {
newtimestamp = currentTimestamp + '000'
} else {
newtimestamp = null
}
} else {
newtimestamp = null
};
let dateobj = newtimestamp ? new Date(parseInt(newtimestamp)) : new Date()
let YYYY = dateobj.getFullYear()
let MM = dateobj.getMonth() > 8 ? dateobj.getMonth() + 1 : '0' + (dateobj.getMonth() + 1)
let DD = dateobj.getDate() > 9 ? dateobj.getDate() : '0' + dateobj.getDate()
let HH = dateobj.getHours() > 9 ? dateobj.getHours() : '0' + dateobj.getHours()
let mm = dateobj.getMinutes() > 9 ? dateobj.getMinutes() : '0' + dateobj.getMinutes()
let ss = dateobj.getSeconds() > 9 ? dateobj.getSeconds() : '0' + dateobj.getSeconds()
let output = '';
let separator = '/'
if (format) {
separator = format.match(/-/) ? '-' : '/'
output += format.match(/yy/i) ? YYYY : ''
output += format.match(/MM/) ? (output.length ? separator : '') + MM : ''
output += format.match(/dd/i) ? (output.length ? separator : '') + DD : ''
output += format.match(/hh/i) ? (output.length ? ' ' : '') + HH : ''
output += format.match(/mm/) ? (output.length ? ':' : '') + mm : ''
output += format.match(/ss/i) ? (output.length ? ':' : '') + ss : ''
} else {
output += YYYY + separator + MM + separator + DD
}
output = prefix ? (prefix + output) : output
return newtimestamp ? output : ''
}
然后调用传入开始时间和结束时间就可以了。
我这里aa和bb是我自己定的开始和结束的时间变量。topGraph是图表，把timearr传参进去，放在X轴的data后面就行了。
mounted() {
//把起始结束日期放进去，计算出中间所有日期
let timearr = this.getAll(this.aa, this.bb);
//参数传给echarts图渲染出来X轴
this.topGraph(timearr);
},
2，Y轴左右双轴：Y轴左边有一排数字，右边也有一排
这样写就行。
yAxis: [
{
type: "value",
min: 0, //最小
max: 400,//最大值
interval: 100,//间隔多少
axisLabel: {
formatter: "{value} ",
},
},
{
type: "value",
min: 50,
max: 110,
interval: 20,
axisLabel: {
formatter: "{value} ",
},
},
],
3，Y轴添加百分比
yAxis: [
{
type: "value",
min: 0,
max: 300,
interval: 50,
axisLabel: {
formatter: "{value} ",
},
},
{
type: "value",
min: 30,
max: 90,
interval: 20,
axisLabel: {
formatter: "{value}"+'%',//这个地方加个百分比符号拼接就行，这是加在Y轴右边的。如果想要Y轴左边就加上面
},
},
],
4，series数据加百分比后缀
添加formatter，符号的意思参考官方文档
tooltip: {
trigger: "axis",
formatter:
"{b0}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}
{a3}: {c3}",
},
5，title的位置更改
title: {
text: "趋势图",
left: "center",调title位置，可以右中右，也可以给数字，改值就行。
//left：20 //这种是给数字的
},
6，legend的位置更改
跟上面一样的，不多说
legend: {
data: ["调整前", "调整后"],
left: 10,
top: 30,
},
7，改变图表大小
可以用数字和百分比
grid: {
left: "3%",
right: "4%",
bottom: 80,
containLabel: true,
},
8，图表自适应
放在myChart.setOption(option);下面就行了，然后给你的盒子设置自适应，如果定死了宽高还是不能自适应的
//监听，根据视口变化动态从新渲染表格
window.addEventListener("resize", function () {
myChart.resize();
});
9，X轴刻度信息倾斜
xAxis: {
type: "category",
boundaryGap: false,
//X轴刻度信息
data: ["9月","10月"],
axisLabel: {
interale: 0, //坐标轴刻度标签的显示间隔,设置成 0 强制显示所有标签
rotate: 40, //设置日期显示样式（倾斜度)还可以负值
},
},
10，节点数值默认显示
series: [
{
name: "检测数量",
type: "bar",
data: [220, 229,234],
//加一个这个label就可以了。按这个设置。
label: {
show: true,
formatter: function (data) {
return data.value;
},
},
},]
11，折线图变虚线显示
添加lineStyle部分
series: [
{
name: "检测数量",
type: "bar",
data: [220, 229,234],
//加一个这个lineStyle就可以了。按这个设置。
lineStyle: {
color: "#FF0000",
width: 2,
type: "dashed",
},
},
},]
12，折线和柱子的颜色
直接加color就行，几个数据条就对应几个颜色，按顺序对应
var option = {
color: ["#f8cbad", "#a5a5a5", "#636363","#4472c4", "#ffe699"],
}
13，折线图节点实心和节点大小改变
如果symbolSize改成0就不显示节点了。
series: [
{
name: "检测数量",
type: "bar",
data: [220, 229,234],
//这两个，上面是实心，下面是大小
symbol: "circle",
symbolSize: 9,
},
},]
14，legend分行写法
这样就分了两行，并用bottom定好各自的位置别重叠了。可以自己改
legend: [
{
data: [
"检测数量",
"检测数量",
"检测数量",
"检测数量",
"检测数量",
],
bottom: 30,
},
{
data: [
"A级率",
"A级率",
"A级率",
"A级率",
"A级率",
"平均 A级率",
],
bottom: 10,
}
],
15，柱状图和折线图共存图
series: [
{
name: '蒸发量',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: '降水量',
//bar是柱状图
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name: '平均温度',
//这个代表折线
type: 'line',
yAxisIndex: 1,
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
16，折线依据右边Y轴数据
series: [
{
name: "检测数量",
type: "bar",
data: [220, 229,234],
//添加这个就是根据右边的数值显示，如果删除就根据左边的显示
yAxisIndex: 1,
},]
17，toolbox五个按钮
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
18，鼠标移动上去出现提示框
tooltip: {
trigger: "item",
},
19，圆环图引导线位置放在外围
series内
position: "outside",
20，柱状图渐变色
series内
{
type: "bar",
showBackground: false,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#83bff6" },
{ offset: 0.5, color: "#188df0" },
{ offset: 1, color: "#188df0" },
]),
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#2378f7" },
{ offset: 0.7, color: "#2378f7" },
{ offset: 1, color: "#83bff6" },
]),
},
},
21，柱状图宽度
series内
barWidth: 25,
22，柱状图自动排序，排序自动让Y轴名字跟着数据动
series内
realtimeSort: true,
23，让折线图变成曲线
在series中添加这个属性
smooth: true,
24，生成随机颜色
color里面的就是生成随机颜色的代码。注意这个引号是Esc下面的波浪号那个引号，也就是es6的模板字符串。
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210],
color:`rgb(${Math.round(Math.random()*255)},${Math.round(Math.random()*255)},${Math.round(Math.random()*255)})`
}
]
25，series循环生成数据
在外面先把后台给的数据拿到，处理成配置的格式，放入对应的数据，然后给到echarts里面赋值就行了。
var series=[]; //定义一个数组变量用于存放配置
//循环把数据放到对应的每一个配置项内。
for(var i = 0;i<data.length;i++){
series.push({
name: data[i],
type: 'line',
stack: '总量',
data: data[i].data
});
}
//把这个配置好的数组放到echarts内。
series: series //讲数组变量赋值即可
26，tooltip提示框内数值后加百分比
主要是这一句：formatter
tooltip: {
trigger: "axis",
formatter: '{b0}
{a0}: {c0}%
{a1}: {c1}%'
},
27，两边留白
作用：可以用来让图表控制两侧的空白大小，比如柱状图排行榜横向，可能会出现太长了，后面的数字看不全的现象，那就可以用留白让图表缩短以此看全文字。
只需要在X轴加boundaryGap就行。
//X轴
xAxis: {
type: "value",
boundaryGap: [0, 0.001]
},
28，折线图下面添加颜色填充，渐变色效果
series内放这个就行了。
//区域填充样式
areaStyle: {
//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
opacity: 0.8,
//填充的颜色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
// 0% 处的颜色
offset: 0,
color: "rgba(128, 255, 165)",
},
{
// 100% 处的颜色
offset: 1,
color: "rgba(1, 191, 236)",
},
]),
},
29，for循环生成series时如何控制每一个线的颜色
这里2个方法，因为是循环生成的，我们没法一个个去添加color，那么就可以通过随机色给颜色，当然也有缺点，就是颜色无法控制，有的时候真的很丑。
第二种办法就是可以先定义一个color的颜色数组，然后循环的时候用这个数组，后面跟上循环的角标，这样就可以控制颜色顺序了，如果需要改变颜色就把对应角标的颜色还成想要的就行。
color:['#cccccc','#222222','#333333']
this.color[i]
30，多个X轴写法
代码较多解释一下：写法就是X轴用数组写，里面每个对象就是一条轴，其中lineStyle的color可以重置这个轴的颜色，data是这一条轴的刻度，offset是轴的偏移量，如果为0会和别的轴重叠起来看不到了。position: ‘bottom’,代表定位，如果不写会把多余的X轴放在图表的上面显示，如果写了就会定位到下面。我这边就是写了四个X轴全放在图的下面。axisPointer内的函数返回的是提示信息的。
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
axisLine: {
onZero: false,
lineStyle: {
color: colors[1]
}
},
axisPointer: {
label: {
formatter: function (params) {
return (
'Precipitation ' +
params.value +
(params.seriesData.length ? '：' + params.seriesData[0].data : '')
);
}
}
},
// prettier-ignore
data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
},
{
type: 'category',
axisTick: {
alignWithLabel: true
},
offset:25,
position: 'bottom',
axisLine: {
onZero: false,
lineStyle: {
color: colors[0]
}
},
axisPointer: {
label: {
formatter: function (params) {
return (
'Precipitation ' +
params.value +
(params.seriesData.length ? '：' + params.seriesData[0].data : '')
);
}
}
},
// prettier-ignore
data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
},
{
type: 'category',
offset:45,
axisTick: {
alignWithLabel: true
},
position: 'bottom',
axisLine: {
onZero: false,
lineStyle: {
color: colors[0]
}
},
axisPointer: {
label: {
formatter: function (params) {
return (
'Precipitation ' +
params.value +
(params.seriesData.length ? '：' + params.seriesData[0].data : '')
);
}
}
},
// prettier-ignore
data: ['2335-1', '2335-2', '2235-3', '2335-4', '2335-5', '2335-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
},
{
type: 'category',
axisTick: {
alignWithLabel: true
},
position: 'bottom',
offset:76,
axisLine: {
onZero: false,
lineStyle: {
color: colors[0]
}
},
axisPointer: {
label: {
formatter: function (params) {
return (
'Precipitation ' +
params.value +
(params.seriesData.length ? '：' + params.seriesData[0].data : '')
);
}
}
},
// prettier-ignore
data: ['3415-1', '3415-2', '3415-3', '3415-4', '3415-5', '3415-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
},
],
然后对应的就是series数据方面
这里重点注意是xAxisIndex这个词，他的作用就是对应X轴，没写就是默认第一条X轴，如果写了1代表第二个X轴，以此类推。
series: [
{
name: 'Precipitation(2015)',
type: 'line',
xAxisIndex: 1,
smooth: true,
emphasis: {
focus: 'series'
},
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
]
},
{
name: 'Precipitation(2015)',
type: 'line',
xAxisIndex: 2,
smooth: true,
emphasis: {
focus: 'series'
},
data: [
1.6, 2.9, 3.0, 4.4, 5.7, 6.7, 7.6, 8.2, 9.7, 18.8, 6.0, 2.3
]
},
{
name: 'Precipitation(2016)',
type: 'line',
smooth: true,
emphasis: {
focus: 'series'
},
data: [
3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7
]
},
{
name: 'Precipitation(2015)',
type: 'line',
xAxisIndex: 3,
smooth: true,
emphasis: {
focus: 'series'
},
data: [
88, 88, 88, 88, 88, 6.7, 7.6, 8.2, 9.7, 18.8, 6.0, 2.3
]
},
]
31，折线图断点如何链接
描述：有时候我们可能会数据中间有空的值，那折线图就会出现无法连线的情况，只有个点在那边。这时候重点是在series配置内加一句connectNulls: true就可以链接空数据了。
series: [{
data: [820, 932, 901, '', 1290, 1330, 1320],
type: 'line',
areaStyle: {},
connectNulls: true //重点内容
}]
32，X轴刻度太多，显示不全处理方法
xAxis : [
{
axisLabel: {
interval:0,//代表显示所有x轴标签显示
}
}
],
但是这样显示会重叠在一起。可以加上角度让他能竖着显示看的清楚
axisLabel: {
interval:0,//代表显示所有x轴标签显示
rotate:45, //代表逆时针旋转45度
}