if-chart

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

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