效果图
主要是series里面的参数
series: [
{
name: 'Fake Data',
type: 'line',
smooth: true,
stack: 'a',
symbol: 'circle',
symbolSize: 5,
sampling: 'average',
itemStyle: {
color: '#F2597F'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(213,72,120,0.8)'
},
{
offset: 1,
color: 'rgba(213,72,120,0.3)'
}
])
},
data: [1, 2, 3, 4, 5, 6, 7]
}
]
这里是整个页面的构建,
<template>
<div class="MonthTraining">
<div id="MonthTraining"></div>
</div>
</template>
<script>
export default {
props: {
subjectData: {
type: Array,
required: true,
},
},
data() {
return {
data: [],
charts: {},
chartyDiv: {},
option: {},
subjectList: [],
subjectCount: [],
};
},
created() {
console.log(this.subjectData, "打印科目");
// this.initSubject();
},
mounted() {
this.init();
console.log(this.data, "打印data");
},
methods: {
init() {
this.chartyDiv = document.getElementById("container");
this.myChart = this.$echarts.init(this.chartyDiv);
this.option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
series: [
{
name: "Fake Data",
type: "line",
smooth: true,
stack: "a",
symbol: "circle",
symbolSize: 5,
sampling: "average",
itemStyle: {
color: "#F2597F",
},
areaStyle: {
color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(213,72,120,0.8)",
},
{
offset: 1,
color: "rgba(213,72,120,0.3)",
},
]),
},
data: [1, 2, 3, 4, 5, 6, 7],
},
],
};
this.myChart.setOption(this.option);
},
initData() {},
},
};
</script>
<style>
</style>