jeecg-boot之echarts Demo

最新推荐文章于 2023-10-25 16:46:36 发布

米泽玄師

最新推荐文章于 2023-10-25 16:46:36 发布

阅读量3.8k

点赞数 4

分类专栏： jeecg-boot 文章标签： jeecg-boot echarts

本文链接：https://blog.csdn.net/level_Tiller/article/details/102705373

版权

jeecg-boot 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、在项目下terminal安装依赖 npm install echarts -S

2、在WebStorm src/main.js中全局引入

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

3、编写代码，在mounted函数中调用echart的实例

<template>
    <div id="myChart" :style="{width:'600px',height:'300px'}"></div>
</template>

<script>
  export default {
    name: 'Echartdemo',
    data(){
      return{
        msg: 'EChart demo'
      }
    },
    mounted(){
      this.drawLine()
    },
    methods: {
      drawLine(){
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        myChart.setOption({
          title: { text: 'xxx高铁商品销量统计' },
          tooltip: {},
          xAxis: {
            data: ["水果","酸奶","可乐","矿泉水","瓜子花生","扑克牌"]
          },
          yAxis:{},
          series:[{
            name: '销售',
            type: 'bar',
            data: [105,40,16,100,210,80]
          }]
        });
      }
    }
  }
</script>

<style scoped>

</style>