san-echarts

下载

NPM:

$ npm i san-echarts --save

#publish
$ npm run publish

使用

San component

通过 import 导入 ESNext

<template>
    <echarts
        data="{=echartsData.option=}"
        s-ref="echarts_01"
        config="{= echartsData.config =}"
        on-click="clickHandler"
        on-globalout="globaloutHandler"
        style="width: 50%;float:left;text-align: center;"
    />
</template>

<script>
import sanEcharts from 'san-echarts';

import '../dep/echarts/js/echarts-map-china.js';
import '../dep/echarts/js/skyfall.theme.black.js';

...
components: {
    'echarts': sanEcharts
},
attached() {
    let echartsData = {
        config: {
          // 默认皮肤
            theme: 'skyfall',
            // loading
            dataLoaded: false,
            size: {
                height: 300
            }
        },
        option: {}
    };
    this.data.set('echartsData', echartsData);
},
clickHandler(event) {
    console.log(event);
},
globaloutHandler(event) {
    console.log(event);
}

</script>

San

s-ref直接引用echarts实例对象

<template>
    <echarts
        s-ref="echarts_01"
        config="{= config =}"
    />
</template>

<script>
import sanEcharts from 'san-echarts';

import '../dep/echarts/js/echarts-map-china.js';
import '../dep/echarts/js/skyfall.theme.black.js';

...
components: {
    'echarts': sanEcharts
},
initData() {
    return {
      config: {
          // 默认皮肤
          theme: 'skyfall',
          // 加载状态
          dataLoaded: false,
          size: {
            height: 300
          }
      }
    }
},
attached() {
    let echartsData = {
        title : {
            text: '南丁格尔玫瑰图',
            subtext: '纯属虚构',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            x : 'center',
            y : 'bottom',
            data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel']
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [
            {
                name:'半径模式',
                type:'pie',
                radius : [20, 110],
                center : ['25%', '50%'],
                roseType : 'radius',
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                lableLine: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                data:[
                    {value:10, name:'rose1'},
                    {value:5, name:'rose2'},
                    {value:15, name:'rose3'},
                    {value:25, name:'rose4'},
                    {value:20, name:'rose5'},
                    {value:35, name:'rose6'},
                    {value:30, name:'rose7'},
                    {value:40, name:'rose8'}
                ]
            },
            {
                name:'面积模式',
                type:'pie',
                radius : [30, 110],
                center : ['75%', '50%'],
                roseType : 'area',
                data:[
                    {value:10, name:'rose1'},
                    {value:5, name:'rose2'},
                    {value:15, name:'rose3'},
                    {value:25, name:'rose4'},
                    {value:20, name:'rose5'},
                    {value:35, name:'rose6'},
                    {value:30, name:'rose7'},
                    {value:40, name:'rose8'}
                ]
            }
        ]
    };
    setTimeout(() => {
      let echartsInstance = this.ref('echarts_01');
      echartsInstance.initEcharts(echartsData);
    }, 2000);

}

</script>

AMD

通过 require 直接传入echarts对象

let sanEcharts = require('san-echarts');

import '../dep/echarts/js/echarts-map-china.js';
import '../dep/echarts/js/skyfall.theme.black.js';
...
components: {
    'echarts': sanEcharts
}

请为 amd loader 正确配置 san-echarts 的引用路径。通过 npm 安装的项目可以采用下面的配置

require.config({
    baseUrl: 'src',
    paths: {
        'san-echarts': './node_modules/san-echarts/dist/san-echarts.js'
    }
});

API

加载插件

let sanEcharts = require('san-echarts');

import '../dep/echarts/js/echarts-map-china.js';
import '../dep/echarts/js/skyfall.theme.black.js';
----------------- OR ---------------------
import theme from '../dep/echarts/js/skyfall.theme.black.json';
import chinaMap from '../dep/echarts/js/echarts-map-china.json';
sanEcharts.registerMap('china', chinaMap);
sanEcharts.registerTheme('skyfall', theme);

...
components: {
    'echarts': sanEcharts
}

静态方法

• initEcharts(options = null)
• connect
• disconnect
• destroy
• showLoading
• hideLoading
• getTheme
• getWidth
• setOption(options, merger = true, slient)
• getWidth
• getHeight
• getDom
• getOption
• resize(size = {width: 300, height: 300})
• dispatchAction
• convertToPixel
• convertFromPixel
• containPixel
• getDataURL
• getConnectedDataURL
• appendData
• clear
• isDisposed
• registerMap
• registerTheme
• getInstance

事件

san-echarts 支持如下echarts事件：

• complete(自定义)

• data-empty(自定义)

• legendselectchanged

• legendselected

• legendunselected

• datazoom

• datarangeselected

• timelinechanged

• timelineplaychanged

• restore

• dataviewchanged

• magictypechanged

• geoselectchanged

• geoselected

• geounselected

• pieselectchanged

• pieselected

• pieunselected

• mapselectchanged

• mapselected

• mapunselected

• axisareaselected

• focusnodeadjacency

• unfocusnodeadjacency

• brush

• brushselected

• 鼠标事件

  • click
  • dblclick
  • mouseover
  • mouseout
  • mousedown
  • mouseup
  • globalout