效果:
代码：
<!--结构-->
<div class='chart-container'>
<chart :options="chartOpts" style="width:100%"></chart>
<div class="chart-title">
<span class="point"></span><span>{{chartTextTitle}}</span>
</div>
</div>
<script>
import ECharts from "vue-echarts/components/ECharts.vue";
import "echarts/lib/chart/line";
import "echarts/lib/component/legend";
import "echarts/lib/component/tooltip";
export default {
data(){
return{
chartTextTitle:''
}
}.
components: {
chart: ECharts
},
computed:{
//具体的配置
chartOpts: function() {
return {
legend: {
width: "100%"
},
//提示
tooltip: {
trigger: "axis",
//显示提示的格式
formatter: params => {
return (
// 通过下标从日期数组显示对应日期
this.chartDataDate[params[0].dataIndex] +
"<br/>· 使用班级数" +
params[0].data
);
}
},
xAxis: {
type: "category",
data: this.chartDataDate,
axisTick: {
//是否显示刻度条
show: false
},
axisLine: {
//X轴的样式
lineStyle: {
color: "#ebeef0"
}
},
//X轴的文本
axisLabel: {
color: "#404040",
formatter: function(val, index) {
return val;
}
}
},
yAxis: {
type: "value",
axisTick: {
//是否显示刻度条
show: false
},
axisLine: {
//Y轴的样式
lineStyle: {
color: "#ebeef0"
}
},
axisLabel: {
color: "#404040",
formatter: function(val, index) {
return val.toString().indexOf(".") > -1 ? "" : val;
}
},
},
series: [
{
data: this.chartDataValue,
type: "line",
areaStyle:{
origin:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#fff' // 0% 处的颜色
}, {
offset: 1, color: "#3CAAEA" // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}
//每一项样式
itemStyle: {
normal: {
color: "#3CAAEA"
}
}
}
]
};
}
}
}
<script>
