Vue关于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"));
              //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）
               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: "日门诊量",
          type: "line",
          smooth: true, //平滑曲线显示
          symbolSize: 10, //标记的大小
          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>



效果

案例网址

案例

直接复制代码，放在 myChart.setOption()即可

作者：Vam的金豆之路

主要领域：前端开发

我的微信：maomin9761

微信公众号：前端历劫之路