echarts折線圖資料動態渲染(調介面)
阿新 • • 發佈:2021-08-04
<template> <div id="mainw" style="width: 750px; height: 400px"></div> </template> <script> var echarts = require("echarts"); mounted() { this.$nextTick(() => { this.getEcgarts(); }); }, methods: { getEcgarts() { 介面函式名().then(res => { var myChart = echarts.init(document.getElementById("mainw")); let resp = res.data; // 介面返回的資料 let option = { title: { text: "", // 標題 textStyle: { fontWeight: "bold", fontSize: 14 // 字型大小 } }, xAxis: { type: "category", boundaryGap: false,// data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], data: resp.map(item => item.keyName) }, yAxis: { type: "value" }, series: [ { // data: [320, 500, 662, 798, 863, 1330, 1320], data: resp.map(item => item.valCount), type:"line", itemStyle: { normal: { color: "#597EF7", //折點顏色 lineStyle: { color: "#597EF7" //折線顏色 } }, label: { show: true } //是否在折線點上顯示數字 }, smooth: true, symbolSize: 13, // 空心點大小 areaStyle: { // 折線漸變 normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, // 0% color: "rgba(80,141,255,0.39)" }, { offset: 0.5, // 50% color: "rgba(56,155,255,0.25)" }, { offset: 1, // 100% color: "rgba(38,197,254,0.00)" } ]) } } } ] }; myChart.setOption(option);
// 如果實在data裡面 寫的option資料 要加上this
myChart.setOption(this.option) }); } </script>