if-chart v1.1.8

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

Event

Theme

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被监听）