Vue關(guān)于echats的使用（淺顯易懂）

安裝

npm install echarts --save


引入 （全局）

main.js

import * as echarts from 'echarts';

Vue.prototype.$echarts = echarts



使用

index.vue

<template>
    <div>
           <div id='line'></div>
    </div>
</template>
<script>
    export default {
        name:'index',
        mounted(){
              const myChart = this.$echarts.init(document.getElementById("line"));
              //建議加上以下這一行代碼，不加的效果圖如下（當(dāng)瀏覽器窗口縮小的時(shí)候）
               window.addEventListener("resize", function() {
                 myChart.resize();
              });
    myChart.setOption({
      color: ["#5fe3a1"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          label: {
            show: true
          }
        }
      },
      xAxis: {
        type: "category",
        data: ["12.3", "12.4", "12.5", "12.6", "12.7", "今天"],
        boundaryGap: false,
        axisTick: {
          alignWithLabel: true
        },
        axisLine: {
          lineStyle: {
            color: "#A1A0AE"
          }
        }
      },
      yAxis: {
        type: "value",
        axisLine: {
          lineStyle: {
            color: "#A1A0AE"
          }
        }
      },
      series: [
        {
          name: "日門(mén)診量",
          type: "line",
          smooth: true, //平滑曲線顯示
          symbolSize: 10, //標(biāo)記的大小
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(60,196,128, 0.7)"
                },
                {
                  offset: 1,
                  color: "rgba(254,254,254,0)"
                }
              ],
              globalCoord: false
            }
          },
          data: [8100, 5000, 8596, 6000, 7500, 5500]
        }
      ]
    });
        }
    }
</script>
<style scoped>
#line{
  width: 100%;
  height: 407px;
  margin: 0 auto;
}
</style>



效果

案例網(wǎng)址

案例

直接復(fù)制代碼，放在 myChart.setOption()即可

作者：Vam的金豆之路

主要領(lǐng)域：前端開(kāi)發(fā)

我的微信：maomin9761

微信公眾號(hào)：前端歷劫之路