vue結(jié)合echarts繪制一個支持切換的折線圖實例

更新時間：2022年10月22日 10:22:58 作者：不染-9732

這篇文章主要介紹了vue結(jié)合echarts繪制一個支持切換的折線圖實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue+echarts繪制一個支持切換的折線圖

在項目中做了一個基礎(chǔ)的折線圖效果，樣式如下

接下來主要記錄在項目中echarts的使用流程

主要關(guān)注《xxx》中的內(nèi)容，其余部分依項目不同而變化

折線圖如何添加陰影
折線圖如何進行線段切換
折線圖如何進行動態(tài)數(shù)據(jù)綁定
折線能夠從0開始顯示，兩端不留空白
echarts在項目中的使用流程

    // 頁面初始天氣數(shù)據(jù)的獲取
    getWeatherNew(eeiId) {
      var option = {};
      let _this = this; 
《==注意內(nèi)外數(shù)據(jù)的this指向問題  下面有四個變量this指向作用域外，需要提前記錄外部this==》
      api.getWeatherNew(eeiId).then((res) => {
        this.weatherData = res.data.hourlyDTOList;
        // 天氣狀態(tài)加載
        _this.weatherSpan.text = this.weatherData[0].text;
        _this.weatherSpan.temp = this.weatherData[0].temp;
        _this.weatherSpan.windDir = this.weatherData[0].windDir;
        _this.weatherSpan.windScale = this.weatherData[0].windScale;
        option = {
          legend: {
            icon: "rect",
            data: ["溫度", "風(fēng)力"],
《==這里data對應(yīng)下面的series中的name，name不同對應(yīng)不同的折線效果==》
            textStyle: {
              //文字樣式
              color: "#c1dafc",
              fontSize: "14",
            },
            right: "9%",
            top: "14%",
            selectedMode: "single",
          },
          tooltip: {
            trigger: "axis",
          },
          xAxis: {
《==折線能夠從0開始顯示，兩端不留空白==》
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            type: "category",
            splitLine: {
              lineStyle: {
                color: "#29457e",
              },
            },
            axisLabel: {
              interval: 0,
            },
《==這里使用了function的方法進行動態(tài)的數(shù)據(jù)綁定，主要用于提取接口中的前十個數(shù)據(jù)內(nèi)容==》
            data: (function () {
              var x = [];
              for (let i = 0; i < 10; i++) {
                // 時間橫坐標(biāo)
                x.push(_this.weatherData[i].fxTime.split("T")[1].slice(0, 5));
              }
              return x;
            })(),
          },
          yAxis: [
            {
              type: "value",
              axisTick: {
                //y軸刻度線
                show: false,
              },
              name: "單位：(°C/級)",
              axisLabel: {
                formatter: "{value}",
              },
              axisLine: {
                lineStyle: {
                  color: "#fff",
                },
              },
              splitLine: {
                lineStyle: {
                  type: "dashed",
                },
              },
            },
          ],
          series: [
            {
              name: "溫度",
              type: "line",
              symbol: "circle", //折線點設(shè)置為實心點
《==為折線添加陰影并支持透明度==》
              areaStyle: {     
                normal: {
                  color: "rgba(255, 255, 255, 0.2)",
                },
              },
              itemStyle: {
                normal: {
                  color: "#4DF9FF", //折線數(shù)據(jù)點顏色
                  lineStyle: {
                    color: "#fff",
                  },
                },
              },
              data: (function () {
                var x = [];
                for (let i = 0; i < 10; i++) {
                  // 時間橫坐標(biāo)
                  x.push(_this.weatherData[i].temp);
                }
                return x;
              })(),
            },
            {
              name: "風(fēng)力",
              type: "line",
              symbol: "circle", //折線點設(shè)置為實心點
              areaStyle: {
                normal: {
                  color: "rgba(255, 255, 255, 0.2)",==》折線圖添加掃過區(qū)域的陰影和背景色透明度
                },
              },
              itemStyle: {
                normal: {
                  color: "#4DF9FF", //折線數(shù)據(jù)點顏色
                  lineStyle: {
                    color: "#fff",
                  },
                },
              },
              data: (function () {
                var x = [];
                for (let i = 0; i < 10; i++) {
                  // 時間橫坐標(biāo)
                  x.push(_this.weatherData[i].windScale.slice(0, 1));
                }
                return x;
              })(),
            },
          ],
        };
        this.option = option;
《==這里是echarts基礎(chǔ)的繪制綁定部分，需要注意的是綁定的元素必須要有寬高，否則不顯示==》
        // 天氣圖表的繪制
        let chartWeather = echarts.init(
          document.getElementById("chartWeather")
        );
        chartWeather.setOption(option);
        this.weatherChange();
      });
    },

這里是關(guān)于第一次如何在項目中引入echarts的記錄

npm install echarts --save ? ? ? 《==下載echarts插件==》

main文件中引入echarts

使用echarts實現(xiàn)折線圖問題

前端可視化是一個前端最基本的技能，要想做的好看，還是得借助一下百度家的echarts，那要怎么在Vue中使用echarts？這個官網(wǎng)沒有給出實例，實例基本都是在jquery里面使用，引入的例子。

Echarts官網(wǎng)：https://echarts.apache.org/zh/index.html

1:在項目里面安裝echarts

cnpm install echarts --s

2：在需要用圖表的地方引入

import echarts from "echarts";

3：打開vue組件，繼續(xù)寫代碼，代碼如下：

<template>
  <div id="app">
    <!--為echarts準(zhǔn)備一個具備大小的容器dom-->
    <div id="main" style="width: 600px; height: 400px"></div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  name: "",
  data() {
    return {
      charts: "",
      opinionData: ["3", "2", "4", "4", "5"],
    };
  },
  methods: {
    drawLine(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["近七日收益"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
 
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["1", "2", "3", "4", "5"],
        },
        yAxis: {
          type: "value",
        },
 
        series: [
          {
            name: "近七日收益",
            type: "line",
            stack: "總量",
            data: this.opinionData,
          },
        ],
      });
    },
  },
  //調(diào)用
  mounted() {
    this.$nextTick(function () {
      this.drawLine("main");
    });
  },
};
</script>
<style scoped>
</style>

這個時候，可以看到，加載出的折線圖了，后面可以繼續(xù)進行完善。

以上完成的，只是一個靜態(tài)頁面，下面就開始完成動態(tài)數(shù)據(jù)渲染部分的折線圖部分啦~~

1：進入項目，npm安裝

npm install axios --save

2：在main.js下引用axios

import axios from 'axios'

3：準(zhǔn)備json數(shù)據(jù)

{
    "categories": [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12"
    ],
    "data": [
        3,
        2,
        4,
        4,
        5
    ]
}

4：跨域問題

一般后端小伙伴給到我們這邊的接口里面，應(yīng)該對跨域問題已經(jīng)處理好了，所以不需要我們處理了。

如果需要我們處理，我們可以設(shè)置代理，利用proxyTable屬性實現(xiàn)跨域請求

在config/index.js 里面找到proxyTable ：{} ，然后在里面加入以下代碼

（這里處于安全考慮，我隱藏了自己的而服務(wù)器域名，如果需要測試，改成你自己的即可）

   proxyTable: {
  '/api': {
     target: 'http://inxxxe.com',//設(shè)置你調(diào)用的接口域名和端口號 
    changeOrigin: true,//允許跨域
    pathRewrite: {
      '^/api': '' //這個是定義要訪問的路徑，名字隨便寫 
    }
  }
},

5：打開一個界面test.vue，開始寫請求數(shù)據(jù)的方法

 methods: {
            getData() {
                axios.get('/api/test.json').then(response => {
                    console.log(response.data);
                       this.opinionData =response.data.data;
                        this.drawLine('main')
                }, response => {
                    console.log("error");
                });
            },
        }

6：再次運行

npm run dev

運行成功之后，打開f12，查看network的請求

這個時候，我們可以看見，本地的localhost替代了我之前放在服務(wù)器上的鏈接的域名，這也是設(shè)置代理成功，就解決了跨域的問題了。

請求成功

response里面也有返回值，ok,下一步就要開始將這些數(shù)據(jù)渲染在前端界面上面了。

test.vue參考代碼：

<template>
    <div>
    <!--為echarts準(zhǔn)備一個具備大小的容器dom-->
    <div id="main" style="width: 600px;height: 400px;"></div>
    </div>
</template>
<script>
    import echarts from 'echarts'
      import axios from "axios";
    export default {
        name: '',
        data() {
            return {
                charts: '',
          
               /* opinionData: ["3", "2", "4", "4", "5"]*/
               opinionData: []
            }
        },
        methods: {
             getData() {
                axios.get('/api/test.json').then(response => {
                    console.log(response.data);
                       this.opinionData =response.data.data;
                        this.drawLine('main')
                }, response => {
                    console.log("error");
                });
            },
            drawLine(id) {
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['近七日收益']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
 
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                    data: ["1","2","3","4","5"]
                    
                    },
                    yAxis: {
                        type: 'value'
                    },
 
                    series: [{
                        name: '近七日收益',
                        type: 'line',
                        stack: '總量',
                        data: this.opinionData
                    }]
                })
            },
                                
        },
        //調(diào)用
        mounted() {
            this.getData();         
        }
    }
</script>

實現(xiàn)效果