Vue 配置 echarts

比眉伴天荒 2024-04-17 19:34 42阅读 0赞

> ECharts，一个使用 JavaScript 实现的开源可视化库。提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

vue中使用echarts

*  安装：yarn add echarts
 *  封装：myCharts.js
 *  引入：main.js
 *  使用

// myCharts.js
    /** * @Author: brady * @Date: 2019/8/30 * @Last Created time: 16:05:23 * @Description: 各种画echarts图表的方法都封装在这里 */
    import echarts from 'echarts'
    
    const install = Vue => { 
      Object.defineProperties(Vue.prototype, { 
        $chart: { 
          get () { 
            return { 
              basePie: id => { 
                this.chart = echarts.init(document.getElementById(id))
                this.chart.clear()
    
                const optionData = { 
                  series : [
                    { 
                      name: '访问来源',
                      type: 'pie',
                      radius: '55%',
                      data:[
                        { value:235, name:'视频广告'},
                        { value:274, name:'联盟广告'},
                        { value:310, name:'邮件营销'},
                        { value:335, name:'直接访问'},
                        { value:400, name:'搜索引擎'}
                      ]
                    }
                  ]
                }
    
                this.chart.setOption(optionData)
              },
            }
          }
        }
      })
    }
    
    export default { 
      install
    }

// main.js
    
    // import echarts from 'echarts' // 全局引入echarts
    import echarts from './assets/js/myCharts'  // 单独封装echarts
    
    // Vue.prototype.$echarts = echarts
    
    Vue.use(echarts)

<template>
      <div id="demo">
        
        <div id="echart"></div>
      </div>
    </template>
    
    <script>
      export default { 
        name: 'Demo',
        data() { 
          return { }
        },
        mounted() { 
          this.$chart.basePie('echart')
        },
      }
    </script>
    
    <style scoped>
      #echart { 
      	padding: 30px;
        width: 300px;
        height: 300px;
      }
    </style>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/4736406093ab4868b60ec6bf84a56751.png