基于ECharts的Vue组件，支持Vue 2和Vue 3，提供多种主题和简化的配置方式。
npm install if-chart --save
<!-- 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}
}
| 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 | Desc | Demo |
|---|---|---|
| resize(echart) | 监听resize变化触发 | @resize |
| chartClick | echarts点击事件 | @chart-click |
| ready | 图表ready事件，获取OptionGenerator | @ready |
1.0.7+ 支持
Echarts.setOption(options, noMerge?)的第二个参数，可以避免数据的叠加，让Echarts实现重绘。if-charts为了数据的展示可靠，默认该参数为true，即每次
都立即重绘，不进行数据的合并。 如果您需要进行数据合并，请在执行generator.setGroupV(option)前，设置generator.notMerge = false
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 组件中使用，简化图表配置过程。
适用于展示数据的占比分布情况。
// 配置示例
const chartData = {
'title.text': '访问来源',
'series.0.data': [
{ value: 1048, name: '搜索引擎' },
{ value: 735, name: '直接访问' },
{ value: 580, name: '邮件营销' },
{ value: 484, name: '联盟广告' },
{ value: 300, name: '视频广告' }
],
'legend.data': ['搜索引擎', '直接访问', '邮件营销', '联盟广告', '视频广告']
};
适用于展示数据随时间变化的趋势。
// 配置示例
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年']
};
适用于展示数据的分布和相关性。
// 配置示例
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': ['女性', '男性']
};
适用于展示二维数据的密度分布。
// 配置示例
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
};
适用于多维数据的比较分析。
// 配置示例
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': ['张三', '李四']
};
适用于展示业务流程中各阶段的转化率。
// 配置示例
const chartData = {
'title.text': '销售漏斗',
'series.0.data': [
{ value: 100, name: '访问' },
{ value: 80, name: '咨询' },
{ value: 60, name: '订单' },
{ value: 40, name: '付款' },
{ value: 20, name: '成交' }
],
'legend.data': ['访问', '咨询', '订单', '付款', '成交']
};
适用于展示单一指标的完成情况。
// 配置示例
const chartData = {
'title.text': '业务完成率',
'series.0.data.0.value': 75.5,
'series.0.data.0.name': '完成率'
};
适用于展示数据的分布情况和离群值。
// 配置示例
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]
]
};
适用于展示复杂系统的流向和分配情况。
// 配置示例
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 }
]
};
适用于展示具有层次结构的数据。
// 配置示例
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>
FAQs
Echarts Component with different theme
We found that if-chart demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub Actions checkout now blocks risky pull_request_target checkouts by default to help prevent pwn request supply chain attacks.
Product
Socket now supports Custom Roles and Repository Access Permissions so organizations can control who can access specific repositories and actions.
Product
Socket MCP now lets AI assistants review org alerts, investigate threats using the Socket threat feed, and inspect package files in addition to dependency scoring.