vue中使用echarts，可实现屏幕自适应

在vue中echarts的简单使用

1.先npm安装

$ npm install echarts --save

2.在vue中全局引用

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

3.在项目中就可以直接使用echarts了

想屏幕适配一定要在div容器中把宽度改成100%

//1.先创建一个div容器，我用的是ref，可以用id去获取容器
<template>
  <div class="echart">
    <div ref="chart1" id="main" style="width: 100%;height:400px;"></div>
  </div>
</template>

 <script>
// import echarts from "echarts"; // 全局引入不行，可以试试局部引入
let myChart5 = null;
// let chart = null
export default {
  mounted() {
  //获取div容器
    let chart1 = this.$refs.chart1;
    myChart5 = this.$echarts.init(chart1);
    //监听窗口的变化，不想屏幕自适应可以不写
    window.addEventListener("resize", function() {
      myChart5.resize();
    });
    // 调用echarts图
    this.drawLine();
  },
  methods: {
    drawLine() {
      // var myChart = echarts.init(document.getElementById("main"));//使用id获取的（想用id或者ref获取容器都可以）
      var option = {//前面一定要写变量
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [ // X轴
          {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [ // Y轴
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "60%",
            data: [10, 52, 200, 334, 390, 330, 220],  // 柱状图的数据
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
       //防止越界，重绘canvas
      window.onresize = myChart5.resize;
      myChart5.setOption(option); 
    },
  },
};
</script>

示例图