Vue使用echarts的完整步骤及解决各种报错

Vue使用echarts步骤：

1. 安装echarts

在项目中安装echarts依赖。使用npm安装，在终端中输入以下命令：

npm install echarts --save

1. 引入echarts

在需要使用echarts的组件中引入echarts。

import echarts from 'echarts'

1. 初始化图表

使用echarts提供的初始化方法进行图表初始化。

var chartDom = document.getElementById('chart');
var myChart = echarts.init(chartDom);

其中chart是一个已定义好的div元素的ID名，如下所示：

<div id="chart"></div>

1. 配置图表

在代码中使用echarts提供的API，配置图表相关选项。这里演示一下初始化一个柱状图的配置：

var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'bar'
    }]
};

1. 渲染图表

使用echarts提供的API，将已经配置好的图表直接渲染到页面中。如下所示：

myChart.setOption(option);

这里提供两个示例：

1. 示例一：Vue中使用echarts

安装echarts依赖

npm install echarts --save

在需要使用的组件中引入echarts

import echarts from 'echarts'

export default {
  name: 'chart',
  data() {
    return {
      chartData: {},
      chartOptions: {}
    }
  },
  mounted() {
    this.getChartData()
  },
  methods: {
    getChartData() {
      // 通过ajax获取数据并更新chartData
      this.$http.get('/api/data')
        .then(res => {
          this.chartData = res.data
          this.chartOptions = this.getChartOptions()
          // 执行图表渲染操作
          this.renderChart()
        })
    },
    getChartOptions() {
      // 图表配置项
      return {
        title: {
          text: '某站点用户访问来源',
          subtext: '纯属虚构',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: this.chartData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    },
    renderChart() {
      // 初始化图表
      const chartDom = document.getElementById('chart')
      const myChart = echarts.init(chartDom)
      // 加载图表配置项
      myChart.setOption(this.chartOptions)
    }
  }
}

1. 示例二：Vue-cli3中使用echarts

2. 安装echarts依赖

npm install echarts --save

1. 在vue.config.js文件中配置，把echarts作为外部引入，避免打包过大

module.exports = {
  chainWebpack: config => {
    config.externals({
      echarts: 'echarts'
    })
  }
}

1. 在组件中引入echarts

import echarts from 'echarts'

1. 初始化图表

mounted() {
  this.drawChart()
},
methods: {
  drawChart() {
    const container = document.getElementsByClassName('chart-container')[0]
    const chartDom = document.createElement('div')
    chartDom.style.height = '400px'
    container.appendChild(chartDom)
    const myChart = echarts.init(chartDom)
    myChart.setOption(this.getChartOptions())
  }
}