105 lines
3.2 KiB
Vue
105 lines
3.2 KiB
Vue
<template>
|
||
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
|
||
<div ref="chart" style="width: 100%;height:250px;"></div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from 'echarts'
|
||
|
||
export default {
|
||
data(){
|
||
return {
|
||
items:[]
|
||
}
|
||
},
|
||
mounted(){
|
||
this.initWebsocket();
|
||
},
|
||
methods:{
|
||
initChart(){
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(this.$refs.chart);
|
||
|
||
// 指定图表的配置项和数据
|
||
let option = {
|
||
xAxis: {
|
||
type: "category",
|
||
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||
position: "bottom",
|
||
axisLine: true,
|
||
axisLabel: {
|
||
color: "rgba(255,255,255,.8)",
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
name: "年度生产量",
|
||
nameLocation: "end",
|
||
nameGap: 24,
|
||
nameTextStyle: {
|
||
color: "rgba(255,255,255,.5)",
|
||
fontSize: 14,
|
||
},
|
||
splitNumber: 4,
|
||
axisLine: {
|
||
lineStyle: {
|
||
opacity: 0,
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#fff",
|
||
opacity: 0.1,
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "rgba(255,255,255,.8)",
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
grid: {
|
||
left: 50,
|
||
right: 10,
|
||
bottom: 25,
|
||
top: "18%",
|
||
},
|
||
series: [
|
||
{
|
||
data: [220, 182, 191, 234, 290, 330, 310],
|
||
type: "line",
|
||
smooth: true,
|
||
symbol: "emptyCircle",
|
||
symbolSize: 8,
|
||
itemStyle: {
|
||
// normal: {
|
||
// color: "#fff",
|
||
// },
|
||
},
|
||
},
|
||
{
|
||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||
type: "line",
|
||
smooth: true,
|
||
symbol: "emptyCircle",
|
||
symbolSize: 8,
|
||
itemStyle: {
|
||
// normal: {
|
||
// color: "#fff",
|
||
// },
|
||
},
|
||
},
|
||
],
|
||
};
|
||
|
||
myChart.setOption(option);
|
||
},
|
||
initWebsocket(){
|
||
|
||
this.initChart();
|
||
|
||
}
|
||
}
|
||
}
|
||
</script> |