echarts系列——在vue工程化项目中如何使用echarts

灰太狼 2022-04-08 08:45 341阅读 0赞

## 安装echarts依赖 ##

npm install echarts --save

点击查看  [echarts官网安装教程][echarts]

## 创建图表 ##

### 全局引入 ###

*  main.js

// 引入echarts
    import echarts from 'echarts'
    
    Vue.prototype.$echarts = echarts

*  map.vue

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

//js
    
    export default {
      name: 'hello',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      },
      mounted(){
        this.drawLine();
      },
      methods: {
        drawLine(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            // 绘制图表
            myChart.setOption({
                title: { text: '在Vue中使用echarts' },
                tooltip: {},
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            });
        }
      }
    }

## 按需引入 ##

上面全局引入会将所有的echarts图表打包，导致体积过大，所以我觉得最好还是按需引入。

*  map.vue
 *      // 引入基本模板
        let echarts = require('echarts/lib/echarts')
        // 引入柱状图组件
        require('echarts/lib/chart/bar')
        // 引入提示框和title组件
        require('echarts/lib/component/tooltip')
        require('echarts/lib/component/title')
        export default {
          name: 'hello',
          data() {
            return {
              msg: 'Welcome to Your Vue.js App'
            }
          },
          mounted() {
            this.drawLine();
          },
          methods: {
            drawLine() {
              // 基于准备好的dom，初始化echarts实例
              let myChart = echarts.init(document.getElementById('myChart'))
              // 绘制图表
              myChart.setOption({
                title: { text: 'ECharts 入门示例' },
                tooltip: {},
                xAxis: {
                  data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                },
                yAxis: {},
                series: [{
                  name: '销量',
                  type: 'bar',
                  data: [5, 20, 36, 10, 10, 20]
                }]
              });
            }
          }
        }
    
    *Tips：这里之所以使用 require 而不是 import，是因为 require 可以直接从 node\_modules 中查找，而 import 必须把路径写全。*
 *  效果图

![SouthEast][]

\-----------------------------------------------------------------分割线---------------------------------------------------------------------------------------

上面是简单的demo，现在讲一下在实际项目中如何使用 地图标注数据，省市的数据

（1）先使用npm安装echarts

npm install echarts --save

（2）在使用的项目中引入echarts和中国地图china.js

china.js 路径  ../../node\_modules/echarts/map/js/china.js

// map.vue
    
    import * as echarts from 'echarts'
    import '../../node_modules/echarts/map/js/china.js' // 引入中国地图数据

//html
    
    <div class="china-map" id="main"></div>

###  项目运行效果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70][]

打完收工！

echarts 的配置项 [官方文档][Link 1]

对于echarts   chart.setOption(option) option中个项api的使用说明 请查看下一篇博客  [echarts系列——echarts各项配置说明，配置项setOption()][echarts_echarts_setOption]

[echarts]: http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts
[SouthEast]: /images/20220407/655a2c9dc9bc4380ad66799247eb5d6f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70]: /images/20220407/8408913953bf4a6a805d016fa92bd118.png
[Link 1]: http://echarts.baidu.com/option.html#visualMap
[echarts_echarts_setOption]: https://blog.csdn.net/csl125/article/details/84874909