在vue3项目中如何使用echarts

一. 背景

近期在做一个vue3的项目，里面有个图表需求，因公司之前使用第三方封装的图表缺少文档，就去看了echars的官网文档，引入原生echars来实现以下需求效果。

二. 阅读文档使用

1. 安装echarts

npm install --save echarts

2. 在组件页面 template 中创建一个容器，定义一个高宽的 dom 容器

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

3. 在setup中引入安装echarts

注意：需要使用import * as echarts from ‘echarts’，不能使用 import echarts from ‘echarts’，否则会报错，因为5.0版本的echarts接口已经变成以下这样：
export { EChartsFullOption as EChartsOption, connect, disConnect, dispose, getInstanceByDom, getInstanceById, getMap, init, registerLocale, registerMap, registerTheme };

<script>
  import { defineComponent, toRefs, reactive, onMounted } from 'vue'
  import * as echarts from 'echarts'
  
  export default defineComponent({
    name: 'Histogram',
    setup() {
      const state = reactive({
        option: {
          grid: {
            top: '4%',
            left: '2%',
            right: '4%',
            bottom: '0%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              data: ["芳草地国际","实验小学","白家庄小学","外国语小学","师范学校附属","望京东园"],
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
            },
          ],
          series: [
            {
              name: '学校',
              type: 'bar',
              barWidth: '40%',
              data: [260,680,360,460,150,320],
            },
          ],
        },
      })
      const initeCharts = () => {
        let myChart = echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption(state.option)
      }
      
      onMounted(() => {
        initeCharts()
      })

      return {
        ...toRefs(state),
      }
    },
  })
</script>

4. 效果如下：

注意：发现一些柱形图的文字内容显示一些没有显示，盲猜没有显示的原因是因为文字太长了，刚好原型里面 X 轴的字需要倾斜，查询文档 xAxis里面有个 axisLabel 可以配置实现

5. xAxis设置字体倾斜

xAxis: [
  {
    type: 'category',
    data: [ "芳草地国际", "实验小学", "白家庄小学", "外国语小学", "师范学校附属", "望京东园" ],
    axisTick: { alignWithLabel: true },
    axisLabel: { interval: 0, rotate: 30 },
  },
],

6. 修改宽度、圆角和渐变色

宽度设置100%

<div id="myChart" :style="{ width: '100%', height: '400px' }"></div>

series里itemStyle的这个属性，可以设置样式，通过color设置渐变色，barBorderRadius设置圆角

series: [
  {
    name: '学校',
    type: 'bar',
    barWidth: '40%',
    itemStyle: {
      color: new VabChart.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#9a9cf6' },
        { offset: 1, color: '#6365ef' },
      ]),
      barBorderRadius: [5, 5, 0, 0],
    },
    data: [260,680,360,460,150,320],
  },
],

效果如下：

三. 添加点击事件

就在我以为完成了的时候，产品突然屁颠屁颠的跑过来说还有个需求，需要点击柱形图和旁边的饼图联动，只能赶紧查文档实现了

1. 给echarts添加click事件
   通过文档知道可以通过on添加click事件

    constiniteCharts = () => {
      let myChart = echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption(state.option)
      myChart.on('click', (params) => {
        console.log(params)
        // to do
      })
    }

事件添加成功了，但是怎么打印出那么多数据呢？发现是有几条数据就打印几次，明显这样是不好的

2. 解决多次打印问题
   在点击事件前通过off关闭

  const initeCharts = () => {
      let myChart = echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption(state.option)
      myChart.off('click')
      myChart.on('click', (params) => {
        console.log(params)
        // to do
      })
    }

添加后实现了只打印一次数据，可以在click事件里去做需求了