Vue使用Echarts（入门级）

原创已于 2024-07-09 15:30:20 修改 · 294 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #echarts

于 2024-07-09 15:29:16 首次发布

最终效果：
在这里插入图片描述

npm install echarts --save	// 先安装echarts

<template>
  <!-- 创建一个dom区域用于挂载echarts图表 -->
  <div id="chart" style="width: 600px;height:500px;"/>
</template>
<script>
import * as echarts from 'echarts' // 导入echarts

export default {
  name: 'DataGraph',
  data() {
    return {
      chart: null // 声明一个变量用于存放echarts实例
    }
  },
  mounted() {
    this.initChart() // echarts初始化创建函数
  },
  methods: {
    initChart() {
      // 使用echarts.init创建实例，参数为要挂载的dom对象
      this.chart = echarts.init(document.getElementById('chart'))
      // echarts相关参数
      const option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      }
      // 对于实例设置上面所配置的参数
      this.chart.setOption(option)
    }
  }
}
</script>
<style scoped>
</style>