elementui 添加echarts组件

1,install echarts

2,全局注册main.js

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

3,页面使用

<div id="chart1" :style="{ width: '460px', height: '300px' }"></div>

4,js

  mounted() {
    this.drawLine("chart1");
  },

    drawLine(name) {
      // 基于准备好的dom,初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(name));
      // 绘制图表
      let option1 = {
        title: { text: "考试场次统计" },
        xAxis: {
          //x轴
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
          axisTick: {
            //刻度
            show: false,
          },
          axisLabel: {
            color: "#333",
          },
          axisLine: {
            //轴线
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        yAxis: {
          name: "",
          nameTextStyle: {
            color: "#333",
          },
          axisLabel: {
            color: "#333",
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            //轴线
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        series: [
          {
            data: [1, 2, 1, 2, 3, 1, 2, 3, 1, 1, 1, 2],
            type: "line",
            smooth: true,
          },
        ],
      };
          myChart.setOption(option1);
    },

 

posted @ 2022-04-15 15:04  jqynr  阅读(519)  评论(0)    收藏  举报