在vue中添加echarts

在vue中添加echarts

1. 首先安装echarts到你的vue项目

 npm install echarts -s

2. 在main.js中引用echart

import echarts from 'echarts';
Vue.use(echarts);

3. 新建一个vue文件，并创建一个dom

<template>
//创建一个dom
  <div id="main" style="width:100%;height:500px;"></div>
</template>
<script>
//引入echarts
import echarts from "echarts";
export default {
     
     
  name: "chart",
  data() {
     
     
    return {
     
     };
  },
  //表格渲染
  mounted() {
     
     
    this.drawLine();
  },
  methods: {
     
     
     //绘制函数
    drawLine() {
     
     
       //根据刚才创建的dom实例化一个表格
      var myChart = echarts.init(document.getElementById("main"));
      //表格的各项参数设置
      myChart.setoption = {
     
     
        //横坐标
        xAxis: {
     
     
           type: 'category',
           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
     
     
           type: 'value'
        },
        series: [{
     
     
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }],
      };
   }
 }
</script>

4.效果图：