1.0.5 • Published 6 years ago
san-echarts v1.0.5
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