vue中使用echarts

安装最新版本（5.2.1）

安装

npm install echarts -save

卸载

npm uninstall echarts --save

引入(新版引入方法）

import * as echarts from 'echarts';
// 或
const echarts = require('echarts');

Vue.prototype.$echarts = echarts

旧版引入方法

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

echart组件

<template>
  <div>
    <div :id="chartData.id" style="width: 100%;height:400px;"></div>
  </div>
</template>

<script>
export default {
  name: "myEcharts",
  data() {
    return {
      myChart: null
    };
  },
  props: ["chartData"],
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      }
    }
  },
  computed:{
    theme() {
      return this.$store.state.settings.theme
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.myChart) {
      return;
    }
    this.myChart.dispose();
    this.myChart = null;
  },
  methods: {
    initChart() {
      this.myChart = this.$echarts.init(
        document.getElementById(this.chartData.id)
      );
      this.setOptions(this.chartData);
    },
    setOptions({ xAxisData, yAxisData, title } = {}) {
      // 绘制图表
      this.myChart.setOption({
        title: { text: title, x: "center", y: "top", textAlign: "left" },
        xAxis: {
          type: "category",
          data: xAxisData,
          axisLabel: {
            //坐标轴刻度标签的相关设置。
            // interval: 1,
          }
        },
        yAxis: {
          type: "value"
        },
        series: {
          type: "line",
          data: yAxisData,
          smooth: true,
          symbol: "circle", //折线点设置为实心点
          symbolSize: 8, //折线点的大小
          itemStyle: {
            normal: {
              lineStyle: {
                color: this.theme // 线条颜色
              }
            }
          },
          color: this.theme
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        grid: {
          //直角坐标系内绘图网格
          show: true, //是否显示直角坐标系网格。[ default: false ]
          bottom: "100px", //
          left: "10px",
          right: "10px",
          containLabel: true
        }
      });
    }
  }
};
</script>

使用组件

<template>
  <div class="app-container">
    <line-chart :chart-data="lineCharMemory" />
    <line-chart :chart-data="lineChartKey" style="margin-top: 10px;" />
  </div>
</template>
<script>

import LineChart from "../../mycomponent/echarts/lineCharts.vue";
import { parseTime } from "@/utils/";
export default {
  name: "xxx",
  data() {
    return {
      lineCharMemory: null, // Redis 内存
      lineChartKey: null, // Redis key
      setInterTime: null
    };
  },
  components: {
    "line-chart": LineChart
  },

  created() {
    this.initChart();
  },
  beforeDestroy() {
    clearInterval(this.setInterTime); // 清除定时器
    this.setInterTime = null;
  },
  methods: {
    initChart() {
      let time = new Date().getTime();
      this.lineCharMemory = {
        xAxisData: [],
        yAxisData: [],
        title: "Redis 内存实时占用情况",
        id: "mychart1"
      };
      this.lineChartKey = {
        xAxisData: [],
        yAxisData: [],
        title: "Redis key的实时数量",
        id: "mychart2"
      };
      for (let i = -9; i <= 0; i++) {
        this.lineCharMemory.xAxisData.push(
          parseTime(time + i * 1e3).substring(11)
        );
        this.lineCharMemory.yAxisData.push(Math.random() * (1e3 - 800) + 800);

        this.lineChartKey.xAxisData.push(
          parseTime(time + i * 1e3).substring(11)
        );
        this.lineChartKey.yAxisData.push(Math.random() * (1e3 - 800) + 800);
      }

      this.setInterTime = setInterval(async () => {
        this.lineCharMemory.xAxisData.shift();
        this.lineCharMemory.yAxisData.shift();
        this.lineCharMemory.xAxisData.push(parseTime(time + 30 * 1e3).substring(11));
        this.lineCharMemory.yAxisData.push(Math.random() * (1e3 - 800) + 800);
        this.lineChartKey.xAxisData.shift();
        this.lineChartKey.yAxisData.shift();
        this.lineChartKey.xAxisData.push(parseTime(time + 30 * 1e3).substring(11));
        this.lineChartKey.yAxisData.push(Math.random() * (1e3 - 800) + 800);
        // console.log('lineChartKey:', this.lineChartKey);
        // let res1 = await redisKeysSize();
        // console.log('getRedisSize:', res1);
        // let res2 = await redisMemoryInfo();
        // console.log('redisMemoryInfo:', res2);
        // Promise.all([res1,res2]).then(res=>{
          // console.log('res:', res);
        // })
      }, 3e3);
    },
   
  }
};
</script>