在vue3项目中如何使用echarts

我正在参加「掘金·启航计划」

一. 背景

vue3项目在做一个图表需求时发现项目之前引入的第三方echarts因确实文档使用时不能满足需求,故去echarts官网查看文档,引入原生echarts.要实现的如下原型效果,用此文档记录.

二. 阅读文档使用

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>

引入后可以发现效果如下,咋有些柱形图的字没有显示呢?猜测是字太长的原因,刚好原型里面x轴的字需要倾斜,查询文档xAxis里面有个axisLabel配置.

4. xAxis设置字体倾斜

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

到这效果基本出来了,但是ui说,你这跟我原型太不符了吧,这也叫完成了?

按照原型这个图表应该占满父元素,现在却是写死的300px确实不行,然后圆角渐变色也没有.赶紧查看文档去修改.防止被喷.

5. 修改宽度,加上圆角和渐变色

   宽度设置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事件里去做事情了~