图示:
数据格式代码:
lineChartsData: {
xData: ['家具', '电器', '数码', '食品', '服装', '医药'],
yData: [
{
name: '店铺一',
data: [10, 50, 60, 24, 52, 35]
},
{
name: '店铺二',
data: [20, 80, 50, 34, 22, 45]
}
]
}
组件代码:
<template>
<div class="box">
<div :id="chartsId">
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
props: {
chartsId: {
type: String,
default: ''
},
chartsData: {
type: Object,
default: () => { }
},
},
data() {
return {}
},
mounted() {
setTimeout(() => {
this.init()
}, 600)
},
methods: {
init() {
// 初始化echarts实例
var myChart = echarts.init(document.getElementById(this.chartsId));
let color = [
{
color1: 'rgba(137, 189, 27, 0.3)',
color2: 'rgba(0, 136, 212, 0)',
color3: 'rgba(0, 0, 0, 0.1)',
color4: 'rgb(0,136,212)',
color5: 'rgba(137,189,2,0.27)',
},
{
color1: 'rgba(0, 136, 212, 0.3)',
color2: 'rgba(137, 189, 27, 0)',
color3: 'rgba(0, 0, 0, 0.1)',
color4: 'rgb(137,189,27)',
color5: 'rgba(0,136,212,0.2)',
},
{
color1: 'rgba(219, 50, 51, 0.3)',
color2: 'rgba(219, 50, 51, 0)',
color3: 'rgba(0, 0, 0, 0.1)',
color4: 'rgb(219,50,51)',
color5: 'rgba(219,50,51,0.2)',
},
{
color1: 'rgba(150, 70, 51, 0.3)',
color2: 'rgba(150, 50, 51, 0)',
color3: 'rgba(0, 0, 0, 0.1)',
color4: 'rgb(150,70,51)',
color5: 'rgba(150,70,51,0.2)',
},
{
color1: 'rgba(195, 50, 51, 0.3)',
color2: 'rgba(195, 50, 51, 0)',
color3: 'rgba(0, 0, 0, 0.1)',
color4: 'rgb(195,50,51)',
color5: 'rgba(195,50,51,0.2)',
},
{
color1: 'rgba(129, 50, 68, 0.3)',
color2: 'rgba(129, 50, 68, 0)',
color3: 'rgba(0, 0, 0, 0.1)',
color4: 'rgb(129,50,68)',
color5: 'rgba(129,50,68,0.2)',
}
]
let arr = []
let title = []
if (this.chartsData.yData.length > 0) {
arr = this.chartsData.yData.map((e, i) => {
title.push(e.name)
return {
name: e.name,
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1,
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: color[i].color1,
},
{
offset: 0.8,
color: color[i].color2,
},
],
false
),
shadowColor: color[i].color3,
shadowBlur: 10,
},
},
itemStyle: {
normal: {
color: color[i].color4,
borderColor: color[i].color5,
borderWidth: 12,
},
},
data: e.data,
}
})
}
var option = {
backgroundColor: "transparent",
tooltip: {
trigger: "axis",
axisPointer: {
lineStyle: {
color: "#57617B",
},
},
},
legend: {
icon: "rect",
itemWidth: 14,
itemHeight: 5,
itemGap: 13,
data: title,
right: "4%",
top: '5%',
textStyle: {
fontSize: 12,
color: "#F1F1F3",
},
},
grid: {
top: '20%',
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
boundaryGap: false,
axisLine: {
lineStyle: {
color: "#fff",
},
},
data: this.chartsData.xData,
}
],
yAxis: [
{
type: "value",
name: "",
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#fff",
},
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
},
},
splitLine: {
lineStyle: {
color: "#57617B",
},
},
},
],
series: arr
}
// 使用配置项和数据显示图表
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
},
computed: {},
watch: {
chartsData: {
handler(val) {
if (val.yData.length > 0) {
this.init()
}
},
deep: true,
// immediate: true
}
},
}
</script>
<style scoped lang='less'>
.box {
width: 100%;
height: 100%;
>div {
width: 100%;
height: 100%;
}
}
</style>