Vue中使用Echarts

心已赠人 2022-03-06 01:20 322阅读 0赞

## 基本用法 ##

*  打开终端输入：npm install echarts --save
 *  在main.js里面全局引入的方式

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    // 初始样式
    import './assets/css/base.css'
    
    import echarts from 'echarts'
    
    Vue.config.productionTip = false
    Vue.prototype.$echarts = echarts
    
    /* eslint-disable no-new */
    new Vue({ 
      el: '#app',
      router,
      components: {  App },
      template: '<App/>'
    })

*  在需要使用的组件页面中  
    1、template中的代码

2、script中的代码

export default { 
      methods: { 
        // 图表
        initEcharts () { 
          let myChart = this.$echarts.init(document.getElementById('sCharts'))
          let option = { 
            tooltip: { 
              trigger: 'axis',
              axisPointer: { 
                type: 'cross'
              }
            },
            xAxis: [
              { 
                type: 'category',
                data: [
                  '1月',
                  '2月',
                  '3月',
                  '4月',
                  '5月',
                  '6月',
                  '7月',
                  '8月',
                  '9月',
                  '10月',
                  '11月',
                  '12月'
                ],
                axisPointer: { 
                  type: 'shadow'
                }
              }
            ],
            yAxis: [
              { 
                type: 'value',
                name: '总体积',
                min: 0,
                max: 10,
                interval: 1,
                axisLabel: { 
                  formatter: '{value} m³'
                }
              },
              { 
                type: 'value',
                name: '使用负荷',
                min: 0,
                max: 100,
                interval: 10,
                axisLabel: { 
                  formatter: '{value} %'
                }
              }
            ],
            series: [
              { 
                name: '总体积',
                type: 'bar',
                data: [
                  2.0,
                  4.9,
                  5.5,
                  2.2,
                  4.6,
                  6.7,
                  5.6,
                  6.2,
                  3.6,
                  2.0,
                  6.4,
                  3.3
                ],
                itemStyle: { 
                  normal: { 
                    color: '#d0e17d'
                  }
                }
                // label: { 
                // show: true
                // }
              },
              { 
                name: '使用负荷',
                type: 'line',
                yAxisIndex: 1,
                data: [
                  100,
                  22,
                  33,
                  45,
                  63,
                  80,
                  20,
                  23,
                  23,
                  65,
                  12,
                  6.2
                ],
                itemStyle: { 
                  normal: { 
                    color: '#898989'
                  }
                }
              }
            ]
          }
          myChart.setOption(option)
        }
      },
      mounted () { 
        this.initEcharts()
      }
    }

3、css中的代码

#sCharts { 
         height: 500px;
       }