Echarts可视化教程

  1. 网站首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. 地图大全
  6. ECharts官网

如何用Vue实现报表生成统计图表

//安装脚手架:
1、npm install vue
2、npm install echarts

//引入脚手架:
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

//具体代码如下:
<template>
  <div id="app">
    <div id="chart"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartData: []  // 存放图表数据的数组
    }
  },
  mounted() {
    this.generateChart()
  },
  methods: {
    generateChart() {
      this.chartData = [10, 20, 30, 40, 50]  // 示例数据
      this.renderChart()
    },
    renderChart() {
      // 使用vue-echarts插件来绘制图表
      let myChart = this.$echarts.init(document.getElementById('chart'))
      
      let option = {
        title: {
          text: '报告统计图表'
        },
        xAxis: {
          type: 'category',
          data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.chartData,
          type: 'bar'
        }]
      }
       
      myChart.setOption(option)
    }
  }
}
</script>
点击展开全文

相关文章

  1. 如何使用Vue进行数据可视化图表
  2. vue利用vue-echarts组件库搭建图表

热门workflows工作流