IfChart

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 | | options | 用于echarts的option配置 | {} | | 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 |

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} | |

AddTheme

import { useChartTheme } from 'if-chart'
const ThemeMachine = useChartTheme()
ThemeMachine.addTheme('myTheme', {
    "tooltip.show": false,
    "tooltip.trigger": "item",
    "legend.top": "5%",
    "legend.right": 0,
    "legend.orient": "vertical",
    "legend.icon": "circle",
    "legend.formatter": null,
    "legend.textStyle.rich.name.width": 80,
    "legend.textStyle.rich.value.width": 20,
    "legend.textStyle.rich.value.align": "right",
    "legend.textStyle.rich.value.fontWeight": "bold",
    "series.0.type": "pie",
    "series.0.radius": ["70%", "90%"],
    "series.0.center": ["20%", "50%"],
    "series.0.color": ["#9176FF", "#00D3FF", "#4A80FF"],
    "series.0.label.show": true,
    "series.0.label.position": "center",
    "series.0.label.fontSize": 10,
    "series.0.label.formatter": data => data.percent + '%' + '\n' + data.name,
    "series.0.emphasis.label.show": true,
    "series.0.emphasis.label.fontSize": 14,
    "series.0.emphasis.label.fontWeight": "bold",
    "series.0.labelLine.show": false,
    "series.0.itemStyle.borderWidth": 2,
    "series.0.itemStyle.borderColor": "#fff",
    "series.0.itemStyle.borderRadius": 5,
    "series.0.data": '!!!!!data',
})

<!-- you template -->
<if-chart @ready="init => ready(init)" width="250px" height="100px" theme="myTheme" />

<<<<<<< HEAD

创建空模板 满足自定义的要求

<!-- 注册空模板 -->
import { useChartTheme } from 'if-chart'
const ThemeMachine = useChartTheme()
<!-- 最简配置 -->
ThemeMachine.addTheme('CustomTheme', {
    'yAxis.type': 'value',
})


<!-- you template -->
<if-chart @ready="init => ready(init)" width="250px" height="100px" theme="CustomTheme" />

<!-- setup -->
const ready = instance => {
    const optionGenerator = instance();
    optionGenerator.setGroupV({
        "legend.show": true,
        "legend.data": ['公司现金流', 'test'], 
        'xAxis.data': ["01月","02月","03月","04月","05月","06月","07月","08月","09月","10月","11月","12月"], 
        'xAxis.triggerEvent': true,
        'series.0.name': '公司现金流', 
        'series.0.type': 'bar',
        "series.0.barWidth": 20,
        'series.0.data': [10440.93,3228.93,1279.14,"0","0","0","0","0","0","0","0","0"], 
        'series.1.name': 'test', 
        'series.1.type': 'bar',
        "series.1.barWidth": 20,
        'series.1.data': [10440.93,3228.93,1279.14,"0","0","0","0","0","0","0","0","0"]
    })
}

=======

Not Merge

1.0.7+ 支持

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

8cb65eaa889cab1f2e727d6dc411f70b7b05aeca

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']) |