vue-cli项目中使用echarts图表实例

下面是“vue-cli项目中使用echarts图表实例”的详细攻略：

1. 安装依赖

首先，需要在vue-cli项目中安装 echarts 和 echarts-for-vue 两个依赖。使用 npm install 命令来进行安装：

npm install echarts echarts-for-vue --save

2. 引入和使用echarts

在需要使用echarts的组件中引入 echarts-for-vue，并在 mounted() 中实例化一个echarts对象。具体实现如下：

<template>
  <div class="echarts-container" ref="echarts"></div>
</template>

<script>
import echarts from 'echarts'
import ECharts from 'echarts-for-vue'

export default {
  name: 'EchartsDemo',
  components: { 'v-chart': ECharts },
  mounted() {
    let chart = echarts.init(this.$refs.echarts)
    this.chart = chart
  }
}
</script>

其中，echarts init() 方法创建了一个基于指定 DOM 的 echarts 实例，并将这个实例绑定到vue实例的 chart 属性上，方便后续的操作。

3. 渲染图表

在mounted()中实例化对象后，我们需要给echarts实例传入数据并渲染图表。以下是一个简单的示例：

示例1： 柱状图

<template>
  <div class="chart-container" ref="chart"></div>
</template>

<script>
  import echarts from 'echarts'
  import ECharts from 'echarts-for-vue'
  export default {
    name: 'EchartsDemo',
    components: { 'v-chart': ECharts },
    mounted () {
      let myChart = echarts.init(this.$refs.chart)
      myChart.setOption({
        tooltip: {},
        xAxis: {
          data: ['A', 'B', 'C', 'D', 'E', 'F']
        },
        yAxis: {},
        series: [{
          name: 'demo',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      })
    }
  }
</script>

本例使用了bar类型的数据以及示例数据，你可以根据需要修改对应的数据格式。

示例2： 折线图

<template>
  <div class="chart-container" ref="chart"></div>
</template>

<script>
  import echarts from 'echarts'
  import ECharts from 'echarts-for-vue'
  export default {
    name: 'EchartsDemo',
    components: { 'v-chart': ECharts },
    mounted () {
      let myChart = echarts.init(this.$refs.chart)
      myChart.setOption({
        tooltip: {},
        xAxis: {
          data: ['A', 'B', 'C', 'D', 'E', 'F']
        },
        yAxis: {},
        series: [{
          name: 'demo',
          type: 'line',
          data: [10, 20, 5, 36, 10, 20]
        }]
      })
    }
  }
</script>

本例使用了line类型的数据以及示例数据，你可以根据需要修改对应的数据格式。

总结

以上就是基于vue-cli项目中使用echarts实例的攻略，主要步骤就是安装、引入、实例化、渲染。你可以根据实际需求来灵活使用，如果有相关问题可以参考echarts的官方文档或者到echarts的论坛进行咨询。