《VUE》vue使用vue-echarts

原创已于 2023-04-19 16:21:56 修改 · 119 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #echarts #javascript

于 2023-03-14 15:44:08 首次发布

VUE 同时被 2 个专栏收录

10 篇文章

订阅专栏

Echarts

5 篇文章

订阅专栏

本文展示了如何在Vue项目中通过cnpm安装vue-echarts，并在main.js中引入ECharts及线图组件。接着在HelloWorld.vue组件中创建一个动态更新的线图，配置了x轴和y轴的数据以及平滑的线条系列。

先cnpm安装vue-echarts

cnpm install echarts vue-echarts

main.js

import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
Vue.component('chart', ECharts)

HelloWorld.vue

<template>
  <div class="hello">
    <chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      orgOptions: {},
    }
  },
  mounted() {
    this.orgOptions = {
        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',
            smooth: true
        }]
    }
  }
}
    </script>