1. 程式人生 > 其它 >echarts折線圖資料動態渲染(調介面)

echarts折線圖資料動態渲染(調介面)

<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>

希望對你有所幫助