<template>
<div
ref="echartsBox"
class="chart"
:style="{ height: height, width: width }"
/>
</template>
<script>
import * as echarts from "echarts";
import { echartAnimation } from "@/utils/index";
export default {
name: "LineMore",
props: {
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "100%",
},
barColor: {
type: String,
default: "#FF9129",
},
lineColor: {
type: Array,
default: () => {
return ["#8BDCFF", "#2FFC8C"];
},
},
title: {
type: String,
default: "",
},
tooltips: {
type: String,
default: "",
},
isSmooth: {
type: Boolean,
default: false,
},
animation: {
type: Boolean,
default: false,
},
size: {
type: Number,
default: null,
},
toolSize: {
type: Number,
default: null,
},
/*
[[曲线名称],[x轴],[[曲线1数据],[曲线2数据],[曲线3数据]]]
*/
dataList: {
type: Array,
default: () => {
return [
[
"type1",
"type2",
"type3",
"type4",
"type5",
"type6",
"type7",
"type8",
],
[2019, 2020, 2021],
[
[11, 10, 22],
[21, 30, 22],
[41, 10, 42],
[19, 10, 32],
[110, 101, 222],
[221, 130, 122],
[141, 110, 142],
[119, 210, 132],
],
];
},
},
grid: {
type: Object,
default: () => {
return {};
},
},
},
data() {
return {
chart: null,
fontSize: 1,
barWidth: 16,
};
},
watch: {
dataList: {
handler() {
this.initChart();
},
deep: true,
},
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
created() {},
mounted() {
if (this.dataList.length > 0) {
this.initChart();
}
},
methods: {
cDispose() {
this.chart.dispose();
this.chart = null;
},
colorRgba(sHex, alpha = 1) {
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
let sColor = sHex.toLowerCase();
if (sColor && reg.test(sColor)) {
if (sColor.length === 4) {
var sColorNew = "#";
for (let i = 1; i < 4; i += 1) {
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
}
sColor = sColorNew;
}
var sColorChange = [];
for (let i = 1; i < 7; i += 2) {
sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
}
return "rgba(" + sColorChange.join(",") + "," + alpha + ")";
} else {
return sColor;
}
},
initChart() {
this.chart = echarts.init(this.$el, "macarons");
this.setOption();
},
setOption() {
const _this = this;
const fontColor = "#F7F7F7";
const grid = Object.assign(
{},
{
left: 45 * _this.fontSize,
right: 20 * _this.fontSize,
top: 30 * _this.fontSize,
bottom: 40 * _this.fontSize,
},
this.grid
);
let colorList = [
"#F66D6F",
"#68CB86",
"#4DBFD8",
"#FF99B3",
"#CAD335",
"#FFEB94",
"#F37C5A",
"#86B55C",
"#753174",
"#DA7FCC",
];
colorList = [..._this.lineColor, ...colorList];
const [..._temp] = _this.dataList || [];
const [_type, xData, sData] = [..._temp];
const dataSeries = [];
const animationSeries = [];
sData.forEach(function (item, i, arr) {
animationSeries.push({
type: "lines",
coordinateSystem: "cartesian2d",
zlevel: 1,
smooth: true,
symbol: "circle",
effect: {
show: true,
smooth: true,
period: 2,
symbolSize: 4,
},
lineStyle: {
normal: {
color: colorList[i],
width: 0,
opacity: 0,
curveness: 0,
},
},
data: echartAnimation([xData, item]),
});
dataSeries.push({
name: _type[i],
type: "line",
yAxisIndex: 0,
smooth: _this.isSmooth,
showSymbol: false, //显示圆圈
showAllSymbol: false,
data: item,
itemStyle: {
color: _this.colorRgba(colorList[i], 0.4),
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: _this.colorRgba(colorList[i], 0.3), // 'rgba(0,212,255, 0.5)',
},
{
offset: 1,
color: _this.colorRgba(colorList[i], 0), // 'rgba(0,212,255, 0)'
},
],
false
),
shadowBlur: 20,
},
},
});
});
const units = {};
const option = {
grid: grid,
legend: {
icon: "rect",
top: "62%",
left: "center",
itemWidth: 10,
itemHeight: 10,
itemGap: 40,
textStyle: {
color: fontColor,
fontSize: 12,
fontFamily: "SourceHanSerifCN-Regular",
},
},
tooltip: {
show: true,
trigger: "axis",
confine: true,
textStyle: {
fontSize: this.toolSize ? this.toolSize : "inherit",
},
formatter(params) {
return `<div>
<p class="tooltip-title">${params[0].name}</p>
${_this.$pubFun.tooltipItemsHtmlString(params)}
</div>`;
},
className: "echarts-tooltip-diy",
},
xAxis: {
type: "category",
data: xData,
boundaryGap: false,
splitLine: {
show: false,
lineStyle: {
color: "#203A6F",
width: 1,
},
},
axisLine: {
lineStyle: {
color: "#233D80",
},
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
color: fontColor,
fontSize: this.size ? this.size : "inherit",
},
},
dataZoom: [
{
show: xData.length > 24,
type: "slider",
realtime: true,
startValue: 0,
endValue: 5,
xAxisIndex: [0],
bottom: "10",
left: "50",
height: 2,
borderColor: "#07417a",
backgroundColor: "transparent",
textStyle: {
color: "#05D5FF",
},
},
],
yAxis: [
{
type: "value",
// name: nameaa[0],
// min: 0,
// splitNumber: 5,
// interval: Math.ceil(Math.ceil(Math.max(...sData[0])) / 5),
// max: Math.ceil(Math.ceil(Math.max(...sData[0])) / 5) * 5,
splitLine: {
show: true,
lineStyle: {
color: "rgba(243, 244, 244, 0.3)",
type: "dashed",
},
},
axisLine: {
lineStyle: {
color: "#233D80",
},
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
color: fontColor,
fontSize: this.size ? this.size : "inherit",
},
},
],
series: _this.animation
? [...dataSeries, ...animationSeries]
: dataSeries,
};
this.chart.setOption(option);
},
},
};
</script>
<style lang="scss" scoped>
.chart {
height: 100%;
width: 100%;
}
</style>
