提取ele-pro修改源码
This commit is contained in:
weicw
8
src/components/ele-admin-pro/packages/ele-chart/index.js
Normal file
8
src/components/ele-admin-pro/packages/ele-chart/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
/** echarts 图表组件封装 license by http://eleadmin.com */
|
||||
import EleChart from './src/main';
|
||||
|
||||
EleChart.install = function (app) {
|
||||
app.component(EleChart.name, EleChart);
|
||||
};
|
||||
|
||||
export default EleChart;
|
||||
268
src/components/ele-admin-pro/packages/ele-chart/src/main.vue
Normal file
268
src/components/ele-admin-pro/packages/ele-chart/src/main.vue
Normal file
@@ -0,0 +1,268 @@
|
||||
<!-- echarts 图表组件封装 https://github.com/ecomfe/vue-echarts -->
|
||||
<template>
|
||||
<div class="ele-charts"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import EleCharTheme from './theme.js';
|
||||
// 改变后需要重新初始化的属性
|
||||
const INIT_TRIGGERS = ['theme', 'initOptions'];
|
||||
// 改变后需要重新监听options改变的属性
|
||||
const REWATCH_TRIGGERS = ['manualUpdate', 'watchShallow'];
|
||||
|
||||
export default {
|
||||
name: 'EleChart',
|
||||
props: {
|
||||
// 主题
|
||||
theme: {
|
||||
type: [String, Object],
|
||||
default() {
|
||||
return EleCharTheme;
|
||||
}
|
||||
},
|
||||
// 图表初始配置
|
||||
initOptions: Object,
|
||||
// 图表配置
|
||||
options: Object,
|
||||
// 实例分组
|
||||
group: String,
|
||||
// 是否关闭深度监听options改变
|
||||
watchShallow: Boolean,
|
||||
// 是否关闭响应式更新
|
||||
manualUpdate: Boolean
|
||||
},
|
||||
computed: {
|
||||
// 屏幕宽度
|
||||
screenWidth() {
|
||||
try {
|
||||
return this.$store.state.theme.screenWidth;
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
// 侧边栏折叠状态
|
||||
collapse() {
|
||||
try {
|
||||
return this.$store.state.theme.collapse;
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
group(group) {
|
||||
this.chart.group = group;
|
||||
},
|
||||
screenWidth() {
|
||||
this.resize();
|
||||
},
|
||||
collapse() {
|
||||
setTimeout(() => {
|
||||
this.resize();
|
||||
}, 360);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initOptionsWatcher();
|
||||
INIT_TRIGGERS.forEach(prop => {
|
||||
this.$watch(
|
||||
prop,
|
||||
() => {
|
||||
this.refresh();
|
||||
},
|
||||
{deep: true}
|
||||
);
|
||||
});
|
||||
REWATCH_TRIGGERS.forEach(prop => {
|
||||
this.$watch(prop, () => {
|
||||
this.initOptionsWatcher();
|
||||
this.refresh();
|
||||
});
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
if (this.options) {
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
unmounted() {
|
||||
if (this.chart) {
|
||||
this.destroy();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 初始化echarts */
|
||||
init(options) {
|
||||
if (this.chart) {
|
||||
return;
|
||||
}
|
||||
const chart = echarts.init(this.$el, this.theme, this.initOptions);
|
||||
if (this.group) {
|
||||
chart.group = this.group;
|
||||
}
|
||||
chart.setOption(options || this.manualOptions || this.options || {}, true);
|
||||
// echarts事件监听
|
||||
Object.keys(this.$attrs).forEach(event => {
|
||||
const handler = this.$attrs[event]
|
||||
if (handler instanceof Function) {
|
||||
if (event.indexOf('zr:') === 0) {
|
||||
chart.getZr().on(event.slice(3), handler);
|
||||
} else {
|
||||
chart.on(event, handler);
|
||||
}
|
||||
}
|
||||
});
|
||||
// 增加实例属性
|
||||
Object.defineProperties(this, {
|
||||
width: {
|
||||
configurable: true,
|
||||
get: () => {
|
||||
return this.delegateGet('getWidth');
|
||||
}
|
||||
},
|
||||
height: {
|
||||
configurable: true,
|
||||
get: () => {
|
||||
return this.delegateGet('getHeight');
|
||||
}
|
||||
},
|
||||
isDisposed: {
|
||||
configurable: true,
|
||||
get: () => {
|
||||
return !!this.delegateGet('isDisposed');
|
||||
}
|
||||
},
|
||||
computedOptions: {
|
||||
configurable: true,
|
||||
get: () => {
|
||||
return this.delegateGet('getOption');
|
||||
}
|
||||
}
|
||||
});
|
||||
this.chart = chart;
|
||||
},
|
||||
/* 初始化options属性变化监听 */
|
||||
initOptionsWatcher() {
|
||||
if (this.__unwatchOptions) {
|
||||
this.__unwatchOptions();
|
||||
this.__unwatchOptions = null;
|
||||
}
|
||||
if (!this.manualUpdate) {
|
||||
this.__unwatchOptions = this.$watch(
|
||||
'options',
|
||||
(val, oldVal) => {
|
||||
if (!this.chart && val) {
|
||||
this.init();
|
||||
} else {
|
||||
this.chart.setOption(val, val !== oldVal);
|
||||
}
|
||||
},
|
||||
{deep: !this.watchShallow}
|
||||
);
|
||||
}
|
||||
},
|
||||
/* 显式修改options */
|
||||
mergeOptions(options, notMerge, lazyUpdate) {
|
||||
if (this.manualUpdate) {
|
||||
this.manualOptions = options;
|
||||
}
|
||||
if (!this.chart) {
|
||||
this.init(options);
|
||||
} else {
|
||||
this.delegateMethod('setOption', options, notMerge, lazyUpdate);
|
||||
}
|
||||
},
|
||||
/* 刷新echarts */
|
||||
refresh() {
|
||||
if (this.chart) {
|
||||
this.destroy();
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
/* 销毁echarts */
|
||||
destroy() {
|
||||
this.dispose();
|
||||
this.chart = null;
|
||||
},
|
||||
/* echarts实例方法 */
|
||||
resize(options) {
|
||||
this.delegateMethod('resize', options);
|
||||
},
|
||||
appendData(params) {
|
||||
this.delegateMethod('appendData', params);
|
||||
},
|
||||
clear() {
|
||||
this.delegateMethod('clear');
|
||||
},
|
||||
showLoading(type, options) {
|
||||
this.delegateMethod('showLoading', type, options);
|
||||
},
|
||||
hideLoading() {
|
||||
this.delegateMethod('hideLoading');
|
||||
},
|
||||
dispatchAction(payload) {
|
||||
this.delegateMethod('dispatchAction', payload);
|
||||
},
|
||||
convertToPixel(finder, value) {
|
||||
return this.delegateMethod('convertToPixel', finder, value);
|
||||
},
|
||||
convertFromPixel(finder, value) {
|
||||
return this.delegateMethod('convertFromPixel', finder, value);
|
||||
},
|
||||
containPixel(finder, value) {
|
||||
return this.delegateMethod('containPixel', finder, value);
|
||||
},
|
||||
getDataURL(options) {
|
||||
return this.delegateMethod('getDataURL', options);
|
||||
},
|
||||
getConnectedDataURL(options) {
|
||||
return this.delegateMethod('getConnectedDataURL', options);
|
||||
},
|
||||
dispose() {
|
||||
this.delegateMethod('dispose');
|
||||
},
|
||||
/* 调用echarts实例方法 */
|
||||
delegateMethod(name, ...args) {
|
||||
if (!this.chart) {
|
||||
this.init();
|
||||
}
|
||||
return this.chart[name](...args);
|
||||
},
|
||||
/* 获取echarts属性 */
|
||||
delegateGet(methodName) {
|
||||
if (!this.chart) {
|
||||
this.init();
|
||||
}
|
||||
return this.chart[methodName]();
|
||||
}
|
||||
},
|
||||
/* echarts静态方法 */
|
||||
connect(group) {
|
||||
if (typeof group !== 'string') {
|
||||
group = group.map(chart => chart.chart);
|
||||
}
|
||||
echarts.connect(group);
|
||||
},
|
||||
disconnect(group) {
|
||||
echarts.disconnect(group);
|
||||
},
|
||||
getMap(mapName) {
|
||||
return echarts.getMap(mapName);
|
||||
},
|
||||
registerMap(mapName, geoJSON, specialAreas) {
|
||||
echarts.registerMap(mapName, geoJSON, specialAreas);
|
||||
},
|
||||
registerTheme(name, theme) {
|
||||
echarts.registerTheme(name, theme);
|
||||
},
|
||||
graphic: echarts.graphic
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.ele-charts > div:first-child {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
395
src/components/ele-admin-pro/packages/ele-chart/src/theme.js
Normal file
395
src/components/ele-admin-pro/packages/ele-chart/src/theme.js
Normal file
@@ -0,0 +1,395 @@
|
||||
/** echarts 图表主题 license by http://eleadmin.com */
|
||||
export default {
|
||||
"color": [
|
||||
"#3aa1ff",
|
||||
"#4ecb73",
|
||||
"#fbd437",
|
||||
"#36cbcb",
|
||||
"#f2637b",
|
||||
"#975fe5",
|
||||
"#fc8452",
|
||||
"#ea7ccc",
|
||||
"#5254cf"
|
||||
],
|
||||
"backgroundColor": "rgba(0,0,0,0)",
|
||||
"textStyle": {},
|
||||
"title": {
|
||||
"textStyle": {
|
||||
"color": "#333333"
|
||||
},
|
||||
"subtextStyle": {
|
||||
"color": "#888888"
|
||||
}
|
||||
},
|
||||
"line": {
|
||||
"itemStyle": {
|
||||
"borderWidth": 1
|
||||
},
|
||||
"lineStyle": {
|
||||
"width": "2"
|
||||
},
|
||||
"symbolSize": 4,
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": false
|
||||
},
|
||||
"radar": {
|
||||
"itemStyle": {
|
||||
"borderWidth": 1
|
||||
},
|
||||
"lineStyle": {
|
||||
"width": "2"
|
||||
},
|
||||
"symbolSize": 4,
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": false
|
||||
},
|
||||
"bar": {
|
||||
"barCategoryGap": "50%",
|
||||
"itemStyle": {
|
||||
"barBorderWidth": "0",
|
||||
"barBorderColor": "#ccc"
|
||||
}
|
||||
},
|
||||
"pie": {
|
||||
"itemStyle": {
|
||||
"borderWidth": "2",
|
||||
"borderColor": "#fff"
|
||||
}
|
||||
},
|
||||
"scatter": {
|
||||
"itemStyle": {
|
||||
"borderWidth": "0",
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
},
|
||||
"boxplot": {
|
||||
"itemStyle": {
|
||||
"borderWidth": "0",
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
},
|
||||
"parallel": {
|
||||
"itemStyle": {
|
||||
"borderWidth": "0",
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
},
|
||||
"sankey": {
|
||||
"itemStyle": {
|
||||
"borderWidth": "0",
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
},
|
||||
"funnel": {
|
||||
"itemStyle": {
|
||||
"borderWidth": "0",
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
},
|
||||
"gauge": {
|
||||
"itemStyle": {
|
||||
"borderWidth": "0",
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
},
|
||||
"candlestick": {
|
||||
"itemStyle": {
|
||||
"color": "#dd3f5d",
|
||||
"color0": "#51bd4b",
|
||||
"borderColor": "#dd3f5d",
|
||||
"borderColor0": "#51bd4b",
|
||||
"borderWidth": 1
|
||||
}
|
||||
},
|
||||
"graph": {
|
||||
"itemStyle": {
|
||||
"borderWidth": "0",
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"lineStyle": {
|
||||
"width": 1,
|
||||
"color": "#aaa"
|
||||
},
|
||||
"symbolSize": 4,
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": false,
|
||||
"color": [
|
||||
"#3aa1ff",
|
||||
"#4ecb73",
|
||||
"#fbd437",
|
||||
"#36cbcb",
|
||||
"#f2637b",
|
||||
"#975fe5",
|
||||
"#fc8452",
|
||||
"#ea7ccc",
|
||||
"#5254cf"
|
||||
],
|
||||
"label": {
|
||||
"color": "#eeeeee"
|
||||
}
|
||||
},
|
||||
"map": {
|
||||
"itemStyle": {
|
||||
"areaColor": "#fafafa",
|
||||
"borderColor": "#d9d9d9",
|
||||
"borderWidth": 1
|
||||
},
|
||||
"label": {
|
||||
"color": "#000",
|
||||
"textBorderColor": "#fff",
|
||||
"textBorderWidth": 1
|
||||
}
|
||||
},
|
||||
"geo": {
|
||||
"itemStyle": {
|
||||
"areaColor": "#fafafa",
|
||||
"borderColor": "#d9d9d9",
|
||||
"borderWidth": 1
|
||||
},
|
||||
"label": {
|
||||
"color": "#000",
|
||||
"textBorderColor": "#fff",
|
||||
"textBorderWidth": 1
|
||||
},
|
||||
"emphasis": {
|
||||
"itemStyle": {
|
||||
"areaColor": "rgba(255,215,0,0.8)",
|
||||
"borderColor": "#d9d9d9",
|
||||
"borderWidth": 1
|
||||
}
|
||||
}
|
||||
},
|
||||
"grid": {
|
||||
"top": 30,
|
||||
"right": 20,
|
||||
"left": 60,
|
||||
"bottom": 40
|
||||
},
|
||||
"categoryAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
},
|
||||
"alignWithLabel": true
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"color": "#555555"
|
||||
},
|
||||
"splitLine": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"type": "dashed",
|
||||
"color": [
|
||||
"#E0E6F1"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.2)",
|
||||
"rgba(210,219,238,0.2)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"valueAxis": {
|
||||
"axisLine": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"color": "#555555"
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"type": "dashed",
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.2)",
|
||||
"rgba(210,219,238,0.2)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"logAxis": {
|
||||
"axisLine": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"color": "#555555"
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.2)",
|
||||
"rgba(210,219,238,0.2)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"timeAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"color": "#555555"
|
||||
},
|
||||
"splitLine": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.2)",
|
||||
"rgba(210,219,238,0.2)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"toolbox": {
|
||||
"iconStyle": {
|
||||
"borderColor": "#888888"
|
||||
},
|
||||
"emphasis": {
|
||||
"iconStyle": {
|
||||
"borderColor": "#888888"
|
||||
}
|
||||
}
|
||||
},
|
||||
"legend": {
|
||||
"textStyle": {
|
||||
"color": "#888888"
|
||||
}
|
||||
},
|
||||
"tooltip": {
|
||||
"axisPointer": {
|
||||
"lineStyle": {
|
||||
"color": "#ccc",
|
||||
"width": 1
|
||||
},
|
||||
"crossStyle": {
|
||||
"color": "#ccc",
|
||||
"width": 1
|
||||
}
|
||||
}
|
||||
},
|
||||
"timeline": {
|
||||
"lineStyle": {
|
||||
"color": "#DAE1F5",
|
||||
"width": 2
|
||||
},
|
||||
"itemStyle": {
|
||||
"color": "#A4B1D7",
|
||||
"borderWidth": "1"
|
||||
},
|
||||
"controlStyle": {
|
||||
"color": "#A4B1D7",
|
||||
"borderColor": "#A4B1D7",
|
||||
"borderWidth": 1
|
||||
},
|
||||
"checkpointStyle": {
|
||||
"color": "#316bf3",
|
||||
"borderColor": "fff"
|
||||
},
|
||||
"label": {
|
||||
"color": "#A4B1D7"
|
||||
},
|
||||
"emphasis": {
|
||||
"itemStyle": {
|
||||
"color": "#FFF"
|
||||
},
|
||||
"controlStyle": {
|
||||
"color": "#A4B1D7",
|
||||
"borderColor": "#A4B1D7",
|
||||
"borderWidth": 1
|
||||
},
|
||||
"label": {
|
||||
"color": "#A4B1D7"
|
||||
}
|
||||
}
|
||||
},
|
||||
"visualMap": {
|
||||
"itemHeight": 80,
|
||||
"itemWidth": 15,
|
||||
"color": [
|
||||
"#bf444c",
|
||||
"#d88273",
|
||||
"#f6efa6"
|
||||
]
|
||||
},
|
||||
"dataZoom": {
|
||||
"handleSize": "100%"
|
||||
},
|
||||
"markPoint": {
|
||||
"label": {
|
||||
"color": "#eeeeee"
|
||||
},
|
||||
"emphasis": {
|
||||
"label": {
|
||||
"color": "#eeeeee"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user