if-charts

How to Use

<!-- main.js -->
import IfChart from 'if-charts'
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()
        DataSet.MileStoneData(generator)

    }
    return {ready}
}

Props

Prop	Desc	Default
width	图表宽度	100%
height	图表高度，{num}px	200px
options	用于echarts的option配置	{}
types	图表加载类型，数组	['line', 'bar', 'pie', 'custom']
resize	布尔值，是否支持resize变化	true
clickEnable	布尔值，是否支持图表点击	true
theme	使用echarts主题	MileStone

Event

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

Theme

Name	Desc	Setting	Demo
MileStone	里程碑	{'series.0.name', 'series.0.data'}
ChargeTimes	时段	{series.0.data}
ChargePolar	环形饼图	{title.0.text, series.0.data}
TrendChart	折线/柱状图	{legend.data, xAxis.data, series.0.name, series.0.data, series.1.name, series.1.data}

OptionGenerator

ready事件返回一个配置生成器的实例，该实例与图表的option绑定。通过修改实例，自动更新图表。

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