在vue中使用echarts

1、使用npm安装

npm install echarts --save

npm install echarts -S

以上两种都可以，也可以使用淘宝cnpm安装

 

2、将echarts组件全部引入

在main.js中添加

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

使用示例（HelloWorld.vue）

<template>
  <div>
    <div ref="testChart" style="height:500px;width:100%;border:1px solid black"></div>
  </div>
</template>
 
<script>
  export default {
    name: "HelloWorld",
    data() {
      return {
        cahrt: null,
        inpMessage: '',
        clickData: '',
        option: {
          title: {
            text: '南丁格尔玫瑰图',
            subtext: '纯属虚构',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            x: 'center',
            y: 'bottom',
            data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
          },
          toolbox: {
            show: true,
            feature: {
              mark: {
                show: true
              },
              dataView: {
                show: true,
                readOnly: false
              },
              magicType: {
                show: true,
                type: ['pie', 'funnel']
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            }
          },
          calculable: true,
          series: [{
              name: '半径模式',
              type: 'pie',
              radius: [20, 110],
              center: ['25%', '50%'],
              roseType: 'radius',
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: true
                }
              },
              lableLine: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: true
                }
              },
              data: [{
                  value: 10,
                  name: 'rose1'
                },
                {
                  value: 5,
                  name: 'rose2'
                },
                {
                  value: 15,
                  name: 'rose3'
                },
                {
                  value: 25,
                  name: 'rose4'
                },
                {
                  value: 20,
                  name: 'rose5'
                },
                {
                  value: 35,
                  name: 'rose6'
                },
                {
                  value: 30,
                  name: 'rose7'
                },
                {
                  value: 40,
                  name: 'rose8'
                }
              ]
            },
            {
              name: '面积模式',
              type: 'pie',
              radius: [30, 110],
              center: ['75%', '50%'],
              roseType: 'area',
              data: [{
                  value: 10,
                  name: 'rose1'
                },
                {
                  value: 5,
                  name: 'rose2'
                },
                {
                  value: 15,
                  name: 'rose3'
                },
                {
                  value: 25,
                  name: 'rose4'
                },
                {
                  value: 20,
                  name: 'rose5'
                },
                {
                  value: 35,
                  name: 'rose6'
                },
                {
                  value: 30,
                  name: 'rose7'
                },
                {
                  value: 40,
                  name: 'rose8'
                }
              ]
            }
          ]
        }
      }
    },
    methods: {
      handleClick() {
        //赋值
        this.clickData = this.inpMessage
      },
    },
    mounted() {
      this.cahrt = this.$echarts.init(this.$refs.testChart)
      this.cahrt.setOption(this.option)
      this.cahrt.resize()
    }
  }
</script>
 
<style></style>

运行结果

 

3、按需引入

在main.js中添加

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

使用示例（HelloWorld.vue）

<template>
  <div>
    <div ref="testChart" style="height:500px;width:100%;border:1px solid black"></div>
  </div>
</template>
 
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      cahrt: null,
      inpMessage: '',
      clickData: '',
      option: {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      }
    }
  },
  methods: {
    handleClick() {
      //赋值
      this.clickData = this.inpMessage
    },
  },
  mounted() {
    console.log(this.$echarts)
    this.cahrt = this.$echarts.init(this.$refs.testChart)
    this.cahrt.setOption(this.option)
    this.cahrt.resize()
  }
}
</script>
 
<style></style>

运行结果