使用echart完成折線圖
效果圖：
上代碼：
<template>
<div>
<div id="demo"></div>
</div>
</template>
<script>
export default {
data() {
return {
option: {
title: {
text: "設備增長", //標題設定‘參保情況’
// subtext: "純屬虛構",
left: "center", //標題位置
},
tooltip: {
//滑鼠hover覆寫提示框
trigger: "axis", //坐標線提示
// trigger: "item", //根據item提示資訊
// formatter: "{b} : {c} ", //提示內容
},
legend: {
bottom: "5%",
data: ["在線", "總數"],
},
xAxis: {
axisTick: {
show: false, //不顯示坐標軸刻度線
},
axisLine: {
show: false, //不顯示坐標軸線
},
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
axisTick: {
show: false, //不顯示坐標軸刻度線
},
axisLine: {
show: false, //不顯示坐標軸線
},
type: "value",
// splitLine: {
// show: false, //不顯示網格線
// },
},
grid: {
left: "5%",
right: "5%",
bottom: "20%",
containLabel: true,
},
series: [
{
name: "在線", //設定名稱，跟資料無相關性
hoverAnimation: true, //滑鼠懸停效果，默認是true
data: [
{ value: 335, name: "設備1" },
{ value: 310, name: "設備2" },
{ value: 234, name: "設備3" },
{ value: 135, name: "設備4" },
{ value: 1548, name: "設備5" },
],
type: "line",
},
{
name: "總數",
data: [220, 222, 333, 222, 444, 222, 444],
type: "line",
},
],
},
};
},
mounted() {
// 這個方法不能放在greated生命周期,因為那時候dom還沒初始化完成
this.echarts();
},
methods: {
echarts() {
// 引入 ECharts 主模塊
var echarts = require("echarts/lib/echarts");
// 引入柱狀圖(這個例子可以去掉)
require("echarts/lib/chart/bar");
// 引入提示框和標題組件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
// 基于準備好的dom，初始化echarts實體
var myChart1 = echarts.init(document.getElementById("demo"));
// 繪制餅圖
myChart1.setOption(this.option);
// 繪制折線圖
},
},
};
</script>
<style lang="scss">
#demo {
width: 500px;
height: 300px;
}
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/7572.html
標籤：AI