快捷導(dǎo)航

ECharts調(diào)用接口獲取后端數(shù)據(jù)的四種方法總結(jié)

更新時間：2022年11月12日 09:51:54 作者：哇哦Q

echarts是我們經(jīng)常用到的數(shù)據(jù)可視化圖形,但是后端反饋給我們的數(shù)據(jù)經(jīng)常是數(shù)組包對象的集合類型,下面這篇文章主要給大家介紹了關(guān)于ECharts調(diào)用接口獲取后端數(shù)據(jù)的四種方法,需要的朋友可以參考下

方法一：在mounted中使用定時器調(diào)用eacharts方法（定時器可以獲取到data中的數(shù)據(jù)）
方法二：在調(diào)用數(shù)據(jù)的時候調(diào)用圖表（一個頁面的所有數(shù)據(jù)都在這一個接口中）
方法三：使用chartes中的dataset數(shù)據(jù)集
方法四：在對應(yīng)圖表中，用ajax請求
注意
總結(jié)

使用eacharts做大屏，需要使用后端數(shù)據(jù)，下面的方法是自己試過有效的，有什么不對的，望各位大佬指點。

方法一：在mounted中使用定時器調(diào)用eacharts方法（定時器可以獲取到data中的數(shù)據(jù)）

mounted () {
    setTimeout(() => {
      this.axisOption() // 樹狀
      this.pieOption()//餅圖
    }, 2000)
  },
//或者
mounted () {
    setTimeout(async () => {
      const res = await Getwx()
      this.Monthlist = res.Data.Monthlist
      this.Visitpvlist = res.Data.Visitpvlist
      this.drawLine();//柱狀圖
}, 0);
},

方法二：在調(diào)用數(shù)據(jù)的時候調(diào)用圖表（一個頁面的所有數(shù)據(jù)都在這一個接口中）

created () {
    this.GetProjectAll (）
  },
 
 methods: {
// 獲取數(shù)據(jù)
    async GetProjectAll () {
      const res = await GetProjectAll({ projectid: this.formdata.type })
      this.tableData = res.data.jrgrsl.data
      this.pieData = res.data.clbp.data
      this.$nextTick(() => {
        this.axisOption() // 樹狀
        this.pieOption()//餅圖
      })
    },
  }

方法三：使用chartes中的dataset數(shù)據(jù)集

<script>
import * as echarts from 'echarts'
import { getStatistics } from '@/api/home'
export default {
  data () {
    return {
      mainData: [],//折線圖數(shù)據(jù)
    }
  },
  mounted () {
     this.chartSetting();
  },
  created () {
    this.CeData()
  },
  methods: {
    // 返回數(shù)據(jù)
    async CeData () {
      const { data } = await getStatistics()
      this.mainData = data.mainData
    },
    // 折現(xiàn)圖
    chartSetting () {
      // 基于準備好的dom，初始化echarts實例
      this.mainChart = echarts.init(document.getElementById('main'))
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        dataset: [ // 數(shù)據(jù)
          {  source: this.mainData // 表數(shù)據(jù) },
          { transform: {
              type: 'sort'
            }
          }
        ],
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: { // 底部文字設(shè)置
              interval: 0, // 控制是否全部顯示
              fontSize: 12
            },
            axisLine: { // 底部橫線
              show: false
            },
            axisTick: { // 刻度線
              show: false
            }
          }
        ],
        yAxis: [
          { type: 'value' }
        ],
        series: [
          {
            name: '項目',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {  width: 1,   color: '#2e3192' },
            showSymbol: false,
            label: {  show: true,  position: 'top' },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {  offset: 0,  color: '#62a0f8' },
                {  offset: 1, color: '#b5d5ff' }
              ])
            },
            markPoint: { // 最大值和最小值標(biāo)注
              data: [
                { type: 'max', name: '最大值' }
              ]
            },
            emphasis: {  focus: 'series' }
          }
        ]
      }
      // 繪制圖表
      this.mainChart.setOption(option)
      const that = this
      window.addEventListener('resize', function () {
        that.mainChart.resize()
      })
    },
  }
}
</script>

方法四：在對應(yīng)圖表中，用ajax請求

 drawLine2 () {
      var chartDom = document.getElementById('main2');
      var myChart = echarts.init(chartDom);
      var option;
 
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: {
          left: "11%",
          width: "80%",
          height: "60%"
        },
        legend: [{
          data: ['單位: 秒'],
          top: "10",
          left: "10",
          itemWidth: 8,
          itemHeight: 8,
          icon: "rect",
          textStyle: {
            color: "#fff"
          }
        }, {
          data: ['增速%'],
          top: "10",
          right: "5%",
          itemWidth: 8,
          itemHeight: 8,
          icon: "rect",
          textStyle: {
            color: "#fff"
          }
        }],
        xAxis: [
          {
            type: 'category',
            data: [],
            axisPointer: {
              type: 'shadow'
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#b8b8ba',
              },
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 10000,
            interval: 2000,
            axisLabel: {
              formatter: function (value) {
                return value + ""
              },
              textStyle: {
                color: '#b8b8ba',
              },
            },
            axisLine: {
              show: true
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 0.5
              }
            },
            symbol: "triangle"
          },
          {
            type: 'value',
            min: 0.4,
            max: 0.9,
            interval: 0.1,
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#b8b8ba',
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 0.5
              }
            },
          }
        ],
        series: [
          {
            name: '單位: 秒',
            type: 'bar',
            data: [],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#01c7f4' },
                { offset: 1, color: '#003fe2' }
              ]),
              borderRadius: 8
            },
            barWidth: 10
          },
          {
            name: '增速%',
            type: 'line',
            areaStyle: {},
            yAxisIndex: 1,
            data: [],
            itemStyle: {
              color: "#77ff3b",
            },
            lineStyle: {
              width: 1
            },
            symbolSize: 7,
            areaStyle: {
              opacity: 0.4,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 1, color: '#040d0c' },
                { offset: 0, color: '#5cd62c' }
              ])
            },
          }
        ]
      };
      const zoomSize = 6;
      myChart.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        myChart.dispatchAction({
          type: 'dataZoom',
          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
          endValue:
            dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        });
      });
      option && myChart.setOption(option);
      $.ajax({
        type: "get",
        // async: false, //同步執(zhí)行
        url: "api/WxStatistics/GetStatisticsData",
        data: {},
        success: function (result) {
          myChart.setOption({
            xAxis: { data: result.Data.Monthlist },
            series: [
              {
                data: result.Data.Staytimeuvlist,
              },
              {
                data: [0.6, 0.65, 0.65, 0.68, 0.58, 0.61, 0.58, 0.6, 0.61, 0.65, 0.63, 0.55],
              }
            ]
          })
        },
        error: function (errorMsg) {
          alert("不好意思，圖表請求數(shù)據(jù)失敗啦!");
          myChart.hideLoading();
        }
      })
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

注意

如果一個圖表需要展示不同數(shù)據(jù)時，每獲取一次數(shù)據(jù)，圖表都會重新渲染一次（例如下拉框中選取數(shù)據(jù)后，圖表切換對應(yīng)數(shù)據(jù)）。
可能會出現(xiàn)There is a chart instance already initialized on the dom.這樣的警告，意思是dom上已經(jīng)初始化了一個圖表實例。
解決辦法：可以在每次渲染前先銷毀這個實例，然后再重新渲染。

var myChart //先注冊全局變量
 
 axisOption () {
      //在方法內(nèi)判斷，然后銷毀實例，然后再初始化
      if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose();//銷毀
      }
      // 基于準備好的dom，初始化echarts實例
      myChart = echarts.init(document.getElementById('axisMain'))
      const option = { }
      // 繪制圖表
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },

總結(jié)

到此這篇關(guān)于ECharts調(diào)用接口獲取后端數(shù)據(jù)的四種方法的文章就介紹到這了,更多相關(guān)ECharts調(diào)用接口獲取后端數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: