if-chart

基于ECharts的Vue组件，支持Vue 2和Vue 3，提供多种主题和简化的配置方式。

安装

npm install if-chart --save

How to Use

<!-- main.js -->
import IfChart from 'if-chart'
app.use(IfChart)

<!-- App.vue -->
<if-chart @ready="init => ready(init)" height="100px" theme="MileStone" />

setup(){
    const DataSet = {
        MileStoneData(g) {
            g.setGroupV({
                'yAxis.data': ['Mon', 'Tue', "Wen"],
                'series.0.name': 'MYData',
                'series.0.data': [100, 200, 300],
            })
        },
        ChargeTimesData(g) {
            g.setGroupV({
                'series.0.data': [
                    { value: 1048, name: '高峰时段' }, 
                    { value: 735, name: '平时段' }, 
                    { value: 580, name: '低估时段' }]
            })
        }
    }

    const ready = (init) => {
        let generator = init();
        generator.notMerge = false; //支持数据叠加
        DataSet.MileStoneData(generator);

    }
    return {ready}
}

Props

| Prop | Desc | Default | | ----------- | ------------------ | -------------------------------- | | width | 图表宽度 | 100% | | height | 图表高度，{num}px | 200px | | types | 图表加载类型，数组 | ['line', 'bar', 'pie', 'custom', 'map'] | | resize | 布尔值，是否支持resize变化 | true | | clickEnable | 布尔值，是否支持图表点击 | true | | theme | 使用echarts主题 | MileStone | | lazy | 是否懒加载,滚动到可视区域才出发ready事件 1.1.7+ 支持 | false |

Event

| Event | Desc | Demo | | -------------- | --------------------------- | ------------ | | resize(echart) | 监听resize变化触发 | @resize | | chartClick | echarts点击事件 | @chart-click | | ready | 图表ready事件，获取OptionGenerator | @ready |

Not Merge

1.0.7+ 支持

Echarts.setOption(options, noMerge?)的第二个参数，可以避免数据的叠加，让Echarts实现重绘。if-charts为了数据的展示可靠，默认该参数为true，即每次 都立即重绘，不进行数据的合并。 如果您需要进行数据合并，请在执行generator.setGroupV(option)前，设置generator.notMerge = false

OptionGenerator

ready事件返回一个配置生成器的实例，该实例与图表的option绑定。通过修改实例，自动更新图表。 （注意：Vue2中 仅setGroupV被监听）

| Event | Desc | | | ---------------- | ---------- | ------------------------------------------------------------------- | | setGroupV(obj) | 批量设置option | setGroupV({'series.0.name': 'Data01', 'series.0.name': 'Data02'}) | | setV(key, value) | 设置单个option | setV('legend.data', ['Data01', 'Data02']) |

常用图表主题模板

本目录包含了一系列基于 ECharts 5.x 的常用图表主题模板，这些模板可以直接在 if-chart 组件中使用，简化图表配置过程。

主题列表

1. 饼图 (PieChart)

适用于展示数据的占比分布情况。

// 配置示例
const chartData = {
  'title.text': '访问来源',
  'series.0.data': [
    { value: 1048, name: '搜索引擎' },
    { value: 735, name: '直接访问' },
    { value: 580, name: '邮件营销' },
    { value: 484, name: '联盟广告' },
    { value: 300, name: '视频广告' }
  ],
  'legend.data': ['搜索引擎', '直接访问', '邮件营销', '联盟广告', '视频广告']
};

2. 折线图 (LineChart)

适用于展示数据随时间变化的趋势。

// 配置示例
const chartData = {
  'title.text': '月度销售趋势',
  'xAxis.data': ['1月', '2月', '3月', '4月', '5月', '6月'],
  'series.0.name': '2022年',
  'series.0.data': [120, 132, 101, 134, 90, 230],
  'series.1.name': '2023年',
  'series.1.data': [220, 182, 191, 234, 290, 330],
  'legend.data': ['2022年', '2023年']
};

3. 散点图 (ScatterChart)

适用于展示数据的分布和相关性。

// 配置示例
const chartData = {
  'title.text': '身高体重分布',
  'series.0.name': '女性',
  'series.0.data': [
    [161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6]
  ],
  'series.1.name': '男性',
  'series.1.data': [
    [174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8]
  ],
  'xAxis.name': '身高 (cm)',
  'yAxis.name': '体重 (kg)',
  'legend.data': ['女性', '男性']
};

4. 热力图 (HeatmapChart)

适用于展示二维数据的密度分布。

// 配置示例
const chartData = {
  'title.text': '销售热力图',
  'xAxis.data': ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  'yAxis.data': ['上午', '下午', '晚上'],
  'series.0.data': [
    [0, 0, 5], [0, 1, 7], [0, 2, 3],
    [1, 0, 6], [1, 1, 9], [1, 2, 4],
    [2, 0, 3], [2, 1, 5], [2, 2, 8],
    [3, 0, 8], [3, 1, 6], [3, 2, 2],
    [4, 0, 7], [4, 1, 4], [4, 2, 3],
    [5, 0, 2], [5, 1, 3], [5, 2, 5],
    [6, 0, 1], [6, 1, 2], [6, 2, 6]
  ],
  'visualMap.min': 1,
  'visualMap.max': 10
};

5. 雷达图 (RadarChart)

适用于多维数据的比较分析。

// 配置示例
const chartData = {
  'title.text': '能力评估',
  'radar.indicator': [
    { name: '攻击', max: 100 },
    { name: '防御', max: 100 },
    { name: '速度', max: 100 },
    { name: '力量', max: 100 },
    { name: '耐力', max: 100 },
    { name: '敏捷', max: 100 }
  ],
  'series.0.data.0.value': [80, 50, 60, 80, 70, 80],
  'series.0.data.0.name': '张三',
  'series.0.data.1.value': [70, 90, 80, 60, 50, 90],
  'series.0.data.1.name': '李四',
  'legend.data': ['张三', '李四']
};

6. 漏斗图 (FunnelChart)

适用于展示业务流程中各阶段的转化率。

// 配置示例
const chartData = {
  'title.text': '销售漏斗',
  'series.0.data': [
    { value: 100, name: '访问' },
    { value: 80, name: '咨询' },
    { value: 60, name: '订单' },
    { value: 40, name: '付款' },
    { value: 20, name: '成交' }
  ],
  'legend.data': ['访问', '咨询', '订单', '付款', '成交']
};

7. 仪表盘 (GaugeChart)

适用于展示单一指标的完成情况。

// 配置示例
const chartData = {
  'title.text': '业务完成率',
  'series.0.data.0.value': 75.5,
  'series.0.data.0.name': '完成率'
};

8. 箱线图 (BoxplotChart)

适用于展示数据的分布情况和离群值。

// 配置示例
const chartData = {
  'title.text': '数据分布',
  'xAxis.data': ['类别A', '类别B', '类别C', '类别D', '类别E'],
  'series.0.data': [
    [850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980],
    [960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790],
    [880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910],
    [890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920],
    [890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870]
  ].map(item => {
    return [item[0], item[1], item[2], item[3], item[4]];
  }),
  'series.1.data': [
    [0, 955], [1, 1020], [1, 1070], [2, 1050], [3, 665], [4, 700]
  ]
};

9. 桑基图 (SankeyChart)

适用于展示复杂系统的流向和分配情况。

// 配置示例
const chartData = {
  'title.text': '能源流向图',
  'series.0.data': [
    { name: '农业' },
    { name: '工业' },
    { name: '住宅' },
    { name: '交通' },
    { name: '电力' },
    { name: '煤炭' },
    { name: '石油' },
    { name: '天然气' }
  ],
  'series.0.links': [
    { source: '煤炭', target: '电力', value: 5 },
    { source: '煤炭', target: '工业', value: 3 },
    { source: '煤炭', target: '住宅', value: 1 },
    { source: '石油', target: '交通', value: 8 },
    { source: '石油', target: '工业', value: 2 },
    { source: '天然气', target: '电力', value: 3 },
    { source: '天然气', target: '住宅', value: 4 },
    { source: '电力', target: '农业', value: 1 },
    { source: '电力', target: '工业', value: 4 },
    { source: '电力', target: '住宅', value: 3 }
  ]
};

10. 树图 (TreeChart)

适用于展示具有层次结构的数据。

// 配置示例
const chartData = {
  'title.text': '组织架构图',
  'series.0.data': [
    {
      name: '总经理',
      children: [
        {
          name: '研发部',
          children: [
            { name: '前端组' },
            { name: '后端组' },
            { name: '测试组' }
          ]
        },
        {
          name: '市场部',
          children: [
            { name: '国内市场' },
            { name: '海外市场' }
          ]
        },
        {
          name: '行政部',
          children: [
            { name: '人事' },
            { name: '财务' }
          ]
        }
      ]
    }
  ]
};

使用方法

在 Vue 组件中使用这些主题，通过 ready 事件来设置图表数据：

<template>
  <div>
    <if-chart
      :width="500"
      :height="300"
      theme="PieChart"
      @ready="onChartReady"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartData: {
        'title.text': '访问来源',
        'series.0.data': [
          { value: 1048, name: '搜索引擎' },
          { value: 735, name: '直接访问' },
          { value: 580, name: '邮件营销' },
          { value: 484, name: '联盟广告' },
          { value: 300, name: '视频广告' }
        ],
        'legend.data': ['搜索引擎', '直接访问', '邮件营销', '联盟广告', '视频广告']
      }
    };
  },
  methods: {
    onChartReady(getChart) {
      // 获取chart实例
      const chart = getChart();
      // 通过chart实例的setValue方法设置数据
      chart.setValue(this.chartData);
    }
  }
};
</script>

使用别名简化配置

每个主题都提供了一系列别名，可以大大简化配置过程。使用别名可以让配置更加语义化和简洁。

饼图别名示例

// 使用原始配置
const chartData = {
  'title.text': '访问来源',
  'series.0.data': [
    { value: 1048, name: '搜索引擎' },
    { value: 735, name: '直接访问' }
  ],
  'legend.data': ['搜索引擎', '直接访问'],
  'series.0.radius': '60%',
  'series.0.label.show': true
};

// 使用别名配置 - 更简洁直观
const chartDataWithAlias = {
  'title': '访问来源',
  'data': [
    { value: 1048, name: '搜索引擎' },
    { value: 735, name: '直接访问' }
  ],
  'names': ['搜索引擎', '直接访问'],
  'radius': '60%',
  'labelShow': true
};

// 在ready事件中使用
onChartReady(getChart) {
  // 获取chart实例
  const chart = getChart();
  chart.setValue(this.chartDataWithAlias);
}

折线图别名示例

// 使用原始配置
const chartData = {
  'title.text': '月度销售趋势',
  'xAxis.data': ['1月', '2月', '3月', '4月', '5月', '6月'],
  'series.0.data': [120, 132, 101, 134, 90, 230],
  'series.1.data': [220, 182, 191, 234, 290, 330],
  'series.0.name': '2022年',
  'series.1.name': '2023年',
  'legend.data': ['2022年', '2023年'],
  'series.0.smooth': true
};

// 使用别名配置 - 更简洁直观
const chartDataWithAlias = {
  'title': '月度销售趋势',
  'xData': ['1月', '2月', '3月', '4月', '5月', '6月'],
  'yData1': [120, 132, 101, 134, 90, 230],
  'yData2': [220, 182, 191, 234, 290, 330],
  'series1': '2022年',
  'series2': '2023年',
  'legends': ['2022年', '2023年'],
  'smooth': true
};

// 在ready事件中使用
onChartReady(getChart) {
  // 获取chart实例
  const chart = getChart();
  Object.keys(chartDataWithAlias).forEach(key => {
    chart.setValue(key, chartDataWithAlias[key]);
  });
}

雷达图别名示例

// 使用原始配置
const chartData = {
  'title.text': '能力评估',
  'radar.indicator': [
    { name: '攻击', max: 100 },
    { name: '防御', max: 100 }
  ],
  'series.0.data.0.value': [80, 50],
  'series.0.data.0.name': '张三',
  'series.0.data.1.value': [70, 90],
  'series.0.data.1.name': '李四',
  'legend.data': ['张三', '李四']
};

// 使用别名配置 - 更简洁直观
const chartDataWithAlias = {
  'title': '能力评估',
  'indicators': [
    { name: '攻击', max: 100 },
    { name: '防御', max: 100 }
  ],
  'data1': [80, 50],
  'data2': [70, 90],
  'name1': '张三',
  'name2': '李四',
  'legends': ['张三', '李四']
};

// 在ready事件中使用
onChartReady(getChart) {
  // 获取chart实例
  const chart = getChart();
  chart.setValue(chartDataWithAlias);
  
}

自定义主题

您可以基于这些主题进行自定义：

import { ChartTheme } from 'if-chart';

// 添加自定义主题，继承自饼图主题
ChartTheme.addTheme('MyCustomPie', {
  'title.textStyle.color': '#ff5500',
  'series.0.radius': ['40%', '70%'], // 设置为环形图
  'series.0.itemStyle.borderRadius': 10,
  'series.0.label.formatter': '{b}: {d}%',
  'series.0.label.position': 'outside'
}, {
  // 自定义别名
  'myTitle': 'title.text',
  'myData': 'series.0.data',
  'donutSize': 'series.0.radius'
}, 'PieChart');

然后在组件中使用：

<template>
  <if-chart 
    theme="MyCustomPie" 
    :width="500"
    :height="300"
    @ready="onChartReady" 
  />
</template>

<script>
export default {
  data() {
    return {
      chartData: {
        'myTitle': '我的饼图',
        'myData': [{ value: 100, name: '类别A' }, { value: 200, name: '类别B' }],
        'donutSize': ['40%', '70%']
      }
    };
  },
  methods: {
    onChartReady(getChart) {
      // 获取chart实例
      const chart = getChart();
      chart.setValue(this.chartData);
    }
  }
};
</script>