Vue关于echats的使用（浅显易懂）

安装

npm install echarts --save

引入 （全局）

main.js

import * as echarts from ‘echarts’;

Vue.prototype.$echarts = echarts

使用

index.vue

代码语言：javascript复制

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

更多内容请见原文，原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119327784

前端性能监控

0 人点赞