vue使用echarts

最新推荐文章于 2024-06-26 17:44:28 发布

惟愿君安

最新推荐文章于 2024-06-26 17:44:28 发布

阅读量171

点赞数

分类专栏： vue+echarts 文章标签： echarts vue.js javascript

本文链接：https://blog.csdn.net/z_jing0927/article/details/126703614

版权

Echarts Vue 柱状图数据可视化前端开发

关键词由CSDN通过智能技术生成

vue+echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.安装echarts

npm install echarts --save

2.在main.js中引入

import * as echarts from 'echarts'

Vue.prototype.$echarts = echarts //挂载到Vue实例上面

3.在页面中使用

3.1. 准备一个DOM容器

 <div id="main" style="width: 600px; height: 400px"></div>

3.2.js部分

mounted() {
   this.drawChart()
},

methods: {
 drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = this.$echarts.init(document.getElementById('main'))
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: 'ECharts 入门示例',
        },
        tooltip: {},
        legend: {
          data: ['销量'],
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },

}

4.显示一个柱状图demo