更新记录

1.2.2（2024-04-09）

完善skyline渲染模式下的显示

修复1.2.0版本中的遗留问题

1.2.1（2024-04-07）

显示优化

1.2.0（2024-04-07）

兼容微信小程序的skyline渲染模式

skyline下有个使用限制，同一个页面中如果有多个图表，除第一个图表外其他图表点击等事件(包括tooltip)会失效，如果同一个页面中只有一个图表，那么一切正常

正在处理中...

平台兼容性

uniapp vue3 echarts 微信小程序 兼容Skyline

由大名鼎鼎的 echarts-for-weixin 改造而来，适用于vue3 微信小程序（其他小程序没试过，可以自行尝试）

请仔细阅读文档哦

如何使用

1、引入组件（路径改成实际组件路径）

import JnChart from '@/components/jn-chart/index.vue'

2、使用组件

<JnChart :option="echartsOption" />

组件配置项

其他说明

1、组件中的echarts.js是作者方便测试从echarts官网定制的echarts.js，只包含了基础功能，实际使用中请替换成自己的echarts.js

2、是否支持vue2?

其实组件只是使用了vue3的语法，如果你愿意可以把vue3的语法替换成vue2的语法是完成可行的，后期会考虑增加兼容

3、其他更多使用可以查看使用示例

完整例子

<template>
  <div class="box">
    <JnChart canvasId="line" :option="optionLine" lazyLoad @init="handleInit" />
  </div>

  <div class="box">
    <JnChart canvasId="bar" :option="optionBar" lazyLoad />
  </div>

  <div class="box">
    <JnChart canvasId="pie" :option="optionPie" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
// 请使用自己项目中本组件的真实路径
import JnChart from '@/components/jn-chart/index.vue'

// echarts的配置项
// 如果 option 是通过接口数据动态组成，建议给组件加上 lazyLoad 配置
const optionLine = ref({})
const optionBar = ref({})
// 静态的option，不用也不能加lazyLoad，否则不显示
const optionPie = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
}

onMounted(getData)

// 模拟从接口获取echarts渲染的数据
function getData() {
  setTimeout(() => {
    const data = {
      names: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      values: [820, 932, 901, 934, 1290, 1330, 1320]
    }

    optionLine.value = getOption(data)
    optionBar.value = getOptionBar(data)

  }, 800)
}

function getOption(datasource) {
  const { values, names } = datasource

  const option = {
    // 如果图表显示的很小，记得加上grid
    grid: {
      top: '5%',
      left: '5%',
      right: '5%',
      bottom: 0,
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      confine: true,
      formatter: (params) => {
        const { value, name } = params[0]

        return `自定义tooltip\n${value}\n${name}`
      }
    },
    xAxis: {
      type: 'category',
      data: names
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: values,
        type: 'line',
        smooth: true
      }
    ]
  };

  return option
}

function getOptionBar(datasource) {
  const { values, names } = datasource 

  const option = {
    grid: {
      top: '5%',
      left: '5%',
      right: '5%',
      bottom: 0,
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: names
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: values,
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  }

  return option
}

/**
 * echarts 初始化完成监听
 * @param {Object} chart echarts 实例对象
 */
function handleInit(chart) {
  console.debug('@line chart 实例对象 = ', chart)
}
</script>

<style lang="scss" scoped>
  .box {
    height: 460rpx;

    & + .box {
      margin-top: 30rpx;
    }
  }
</style>