vue echarts子弹图

Vue ECharts 是一款基于 Vue.js 的 ECharts 封装组件，可以方便地在 Vue.js 项目中使用 ECharts。而子弹图（Bullet Chart）是一种常用于展示单一指标的数据可视化图表，常用于仪表盘等场景。

下面是一个使用 Vue ECharts 实现子弹图的示例代码：

<template>
  <div>
    <v-chart :options="chartOptions"></v-chart>
  </div>
</template>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import 'echarts/lib/chart/bullet'

export default {
  components: {
    'v-chart': ECharts
  },
  data () {
    return {
      chartOptions: {
        title: {
          text: '子弹图示例'
        },
        tooltip: {
          formatter: '{a} <br/>{b} : {c}'
        },
        legend: {
          data: ['指标值', '目标值']
        },
        series: [
          {
            type: 'bullet',
            data: [
              {
                name: '指标值',
                value: 70,
                itemStyle: {
                  color: '#d48265'
                }
              },
              {
                name: '目标值',
                value: 90,
                itemStyle: {
                  color: '#91c7ae'
                }
              }
            ]
          }
        ]
      }
    }
  }
}
</script>

在这个示例中，我们通过引入 ECharts 相关组件和样式，定义了一个 `chartOptions` 对象来配置子弹图，然后在模板中使用 `v-chart` 组件呈现这个图表。其中，`data` 数组中的两个元素分别表示指标值和目标值，`itemStyle` 属性用于配置颜色。可以根据需要修改这些配置来实现不同的子弹图效果。