echarts

安装

pnpm

pnpm add @howuse/echarts echarts

npm

npm i @howuse/echarts echarts

yarn

yarn add @howuse/echarts echarts

自适应折线图，其它自适应类似

柱状图

混入模式-柱状图举例

饼图

地图模块演示

事件操作

点击柱状图，触发点击事件，其它事件参考echarts官方文档 https://echarts.apache.org/zh/api.html#events

<template>
  <div style="height: 300px;" :style="{ backgroundColor: theme == 'dark' ? '#000' : '#fff' }">
    <how-bar-chart :option="option" :theme="theme" :config="{ keepData: true }" @get-instance="getInstance"></how-bar-chart>
  </div>
</template>
<script lang="ts" setup>
import { HowBarChart } from "@howuse/echarts";
import { EChartsOption } from 'echarts';
import { ElMessage } from "element-plus";
import { ref } from 'vue';
const theme = ref()

const option: EChartsOption = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {},
  series: [
    {
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110, 130],
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
    }
  ]
}



function getInstance(chart) {
  chart.on('click', (params) => {
    ElMessage.success(`${params.name} ${params.value}`);
  })
}

</script>