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>; ;; ...components: 'echarts': sanEcharts { let echartsData = config: // 默认皮肤 theme: 'skyfall' // loading dataLoaded: false size: height: 300 option: {} ; thisdata;} { console;} { console;} </script>
San
s-ref直接引用echarts实例对象
<template> <echarts s-ref="echarts_01" config="{= config =}" /></template> <script>; ;; ...components: 'echarts': sanEcharts { return config: // 默认皮肤 theme: 'skyfall' // 加载状态 dataLoaded: false size: height: 300 } { 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' ; ; } </script>
AMD
通过 require 直接传入echarts对象
let sanEcharts = ; ;;...components: 'echarts': sanEcharts
请为 amd loader 正确配置 san-echarts 的引用路径。通过 npm 安装的项目可以采用下面的配置
require;
API
加载插件
let sanEcharts = ; ;;----------------- OR ---------------------;;sanEcharts;sanEcharts; ...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