vue怎么引入echats並使用 （柱狀圖 字符雲）

安裝

npm install echarts --save

 下面看一下如何簡單的使用：

在main.js中引入（全局引入）

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

在vue頁面中

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

<script>

export default {
  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]
            }]
        });
    }
  }
}
</script>

 效果圖：

 按需引入

上面全局引入會將所有的echarts圖表打包，導致體積過大，所以我覺得最好還是按需引入。

在當前都vue文件中（script）

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

<script>// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱狀圖組件
require('echarts/lib/chart/bar') // 引入提示框和title組件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')


export default {
  mounted(){
    this.drawLine()
  },
  methods:{
    drawLine(){
        var self=this;
        // 基於准備好的dom，初始化echarts實例
        let myChart =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]
             }]
         });
    }
  }
}
</script>

 import引入會將模塊打包到項目里，而require不會，require直接在node-module包中遞歸查找，路徑也不用寫詳細

 

下面說一下  字符雲  怎么使用

先安安裝包

npm install echarts -S

在需要的頁面引入

require('echarts-wordcloud');

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

<script>// 引入基本模板
let echarts = require('echarts/lib/echarts')

require('echarts-wordcloud')


export default {
  mounted(){
    this.drawLine()
  },
  methods:{
    drawLine(){
        var self=this;
        // 基於准備好的dom，初始化echarts實例
        let myChart =echarts.init(document.getElementById('myChart'))
        myChart.setOption({
          title: {
              text: '詞雲',//標題
              x: 'center',
              textStyle: {
                  fontSize: 23
              }
      
          },
          backgroundColor: '#F7F7F7',
          tooltip: {
              show: true
          },
          series: [{
            name: '熱點分析',//數據提示窗標題
            type: 'wordCloud',
            sizeRange: [6, 66],//畫布范圍，如果設置太大會出現少詞（溢出屏幕）
            rotationRange: [-45, 90],//數據翻轉范圍
            //shape: 'circle',
            textPadding: 0,
            autoSize: {
                enable: true,
                minSize: 6
            },
            textStyle: {
                normal: {
                    color: function() {
                        return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    }
                },
                emphasis: {
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            data: [{
                name: "數據一",
                value: 1000
            }, {
                name: "數據二",
                value: 520
            }]//name和value建議用小寫，大寫有時會出現兼容問題
          }]
      });
    }
  }
}
</script>