danny
/
vue-webtopo-svgeditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增echart图表

Browse Source
2.1
咬轮猫 4 years ago
parent f49dcc02fb
commit 39666b2591
10 changed files with 143 additions and 17 deletions
Show Stats Download Patch File Download Diff File

50
package-lock.json generated
Unescape Escape View File

@ -4773,6 +4773,22 @@
"safer-buffer": "^2.1.0"
}
},
"echarts": {
"version": "5.1.2",
"resolved": "https://registry.nlark.com/echarts/download/echarts-5.1.2.tgz",
"integrity": "sha1-qhqwzvW3T6L3xiAmGl8oaJPTD9E=",
"requires": {
"tslib": "2.0.3",
"zrender": "5.1.1"
},
"dependencies": {
"tslib": {
"version": "2.0.3",
"resolved": "https://registry.nlark.com/tslib/download/tslib-2.0.3.tgz",
"integrity": "sha1-jgdBrEX8DCJuWKF7/D5kubxsphw="
}
}
},
"ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@ -10228,6 +10244,11 @@
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
"dev": true
},
"resize-detector": {
"version": "0.3.0",
"resolved": "https://registry.npm.taobao.org/resize-detector/download/resize-detector-0.3.0.tgz",
"integrity": "sha1-/klREuGEaVUAqPUeA4nxV3TLHPw="
},
"resize-observer-polyfill": {
"version": "1.5.1",
"resolved": "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
@ -12203,6 +12224,20 @@
"@vue/shared": "3.0.11"
}
},
"vue-demi": {
"version": "0.9.1",
"resolved": "https://registry.nlark.com/vue-demi/download/vue-demi-0.9.1.tgz?cache=0&sync_timestamp=1622102566488&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-demi%2Fdownload%2Fvue-demi-0.9.1.tgz",
"integrity": "sha1-Jdbh69TUAQdX/zVx4r9qHXvz3oI="
},
"vue-echarts": {
"version": "6.0.0-rc.6",
"resolved": "https://registry.nlark.com/vue-echarts/download/vue-echarts-6.0.0-rc.6.tgz",
"integrity": "sha1-wSr9vi6FjJQdQ0mW6bubevPIxjE=",
"requires": {
"resize-detector": "^0.3.0",
"vue-demi": "^0.9.1"
}
},
"vue-eslint-parser": {
"version": "7.6.0",
"resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.6.0.tgz?cache=0&sync_timestamp=1614679624052&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-7.6.0.tgz",
@ -13306,6 +13341,21 @@
"dev": true
}
}
},
"zrender": {
"version": "5.1.1",
"resolved": "https://registry.nlark.com/zrender/download/zrender-5.1.1.tgz",
"integrity": "sha1-BRX0+MwPR0LwKmuIGVUKbRPWTFw=",
"requires": {
"tslib": "2.0.3"
},
"dependencies": {
"tslib": {
"version": "2.0.3",
"resolved": "https://registry.nlark.com/tslib/download/tslib-2.0.3.tgz",
"integrity": "sha1-jgdBrEX8DCJuWKF7/D5kubxsphw="
}
}
}
}
}

2
package.json
Unescape Escape View File

@ -12,7 +12,9 @@
"ant-design-vue": "^2.0.0-rc.7",
"axios": "^0.21.1",
"core-js": "^3.6.5",
"echarts": "^5.1.2",
"vue": "^3.0.0",
"vue-echarts": "^6.0.0-rc.6",
"vue-router": "^4.0.4"
},
"devDependencies": {

BIN
public/ECharts_BasicBar.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
public/ECharts_PieSvg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

30
public/InterfaceReturn.json
Unescape Escape View File

@ -1,6 +1,7 @@
[{
"type": "AlternatorSvg",
"title": "发电机",
"panelclass":"draggable",
"template": "<ellipse id=\"c1\" cx=\"50\" cy=\"50\" rx=\"35\" ry=\"35\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-50,-50)\"></ellipse><path id=\"l1\" d=\"M30,50 C30,44 34,40 40,40 46,40 50,44 50,50 M50,50 C50,56 54,60 60,60 66,60 70,56 70,50 \" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-50,-50)\"></path>",
"props": ["prop_data"],
"default_attr":{
@ -11,6 +12,7 @@
}, {
"type": "ArrowDownSvg",
"title": "箭头向下",
"panelclass":"draggable",
"template": "<polygon points=\"0,-8 5,0 10,-8\" :fill=\"prop_data.svgColor\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-5,0)\"></polygon>",
"props": ["prop_data"],
"default_attr":{
@ -21,6 +23,7 @@
}, {
"type": "ArrowUpSvg",
"title": "箭头向上",
"panelclass":"draggable",
"template": "<polygon points=\"0,8 5,0 10,8\" :fill=\"prop_data.svgColor\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-5,0)\"></polygon>",
"props": ["prop_data"],
"default_attr":{
@ -32,6 +35,7 @@
{
"type": "ConnLineSvg",
"title": "连接线",
"panelclass":"draw",
"template": "<line x1=\"0\" y1=\"0\" :x2=\"(prop_data.mPoint.endX-prop_data.mPoint.startX)\" :y2=\"(prop_data.mPoint.endY-prop_data.mPoint.startY)\" :fill=\"prop_data.svgColor\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line>",
"props": ["prop_data"],
"default_attr":{
@ -39,4 +43,30 @@
},
"create_type":"click",
"priview_img":"/VerticalLineSvg.png"
},
{
"type": "EchartsPieSvg",
"title": "Echart饼图",
"panelclass":"chart",
"template": "<foreignObject x=\"0\" y=\"0\" width=\"400\" height=\"400\"> <v-chart :option=\"prop_data.echarts_option\" /></foreignObject>",
"props": ["prop_data"],
"default_attr":{
"color":"#000000",
"echarts_option":"{\"title\":{\"text\":\"某站点用户访问来源\",\"subtext\":\"纯属虚构\",\"left\":\"center\"},\"tooltip\":{\"trigger\":\"item\"},\"legend\":{\"orient\":\"vertical\",\"left\":\"left\"},\"series\":[{\"name\":\"访问来源\",\"type\":\"pie\",\"radius\":\"50%\",\"data\":[{\"value\":1048,\"name\":\"搜索引擎\"},{\"value\":735,\"name\":\"直接访问\"},{\"value\":580,\"name\":\"邮件营销\"},{\"value\":484,\"name\":\"联盟广告\"},{\"value\":300,\"name\":\"视频广告\"}],\"emphasis\":{\"itemStyle\":{\"shadowBlur\":10,\"shadowOffsetX\":0,\"shadowColor\":\"rgba(0, 0, 0, 0.5)\"}}}]}"
},
"create_type":"draggable",
"priview_img":"/ECharts_PieSvg.png"
},
{
"type": "EchartsBasicBarSvg",
"title": "Echart基础柱状图",
"panelclass":"chart",
"template": "<foreignObject x=\"0\" y=\"0\" width=\"400\" height=\"400\"> <v-chart :option=\"prop_data.echarts_option\" /></foreignObject>",
"props": ["prop_data"],
"default_attr":{
"color":"#000000",
"echarts_option":"{\"xAxis\":{\"type\":\"category\",\"data\":[\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\",\"Sat\",\"Sun\"]},\"yAxis\":{\"type\":\"value\"},\"series\":[{\"data\":[120,200,150,80,70,110,130],\"type\":\"bar\"}]}"
},
"create_type":"draggable",
"priview_img":"/ECharts_BasicBar.png"
}]

29
src/components/LeftToolBar.vue
Unescape Escape View File

@ -22,7 +22,7 @@
header="绘制组件"
:disabled="false">
<ul class="svg-nav-list">
<li v-for="item in clickComponentList"
<li v-for="item in drawComponentList"
:key="item"
:class="$store.state.CurrentlySelectedToolBar.CreateType==item.create_type?'toolbar-selected':''">
<div class="title">{{item.title}}</div>
@ -34,7 +34,16 @@
</a-collapse-panel>
<a-collapse-panel key="3"
header="图表">
<p>{{ text }}</p>
<ul class="svg-nav-list">
<li v-for="item in chartComponentList"
:key="item">
<div class="title">{{item.title}}</div>
<img :title="item.title"
@mousedown="Mousedown(item.type,item.title,item.default_attr,item.create_type)"
:src="item.priview_img"
draggable="draggable">
</li>
</ul>
</a-collapse-panel>
</a-collapse>
</div>
@ -47,19 +56,22 @@ export default {
activeKey: ['1'],//当前激活的key
text: `这里是预留位置.`,
draggableComponentList: [],//拖动组件
clickComponentList: [],//点击类型组件
drawComponentList: [],//绘制类型组件
chartComponentList: [],//图表类型
};
},
watch: {
'svgInfoData': {
deep: true,
handler (val) {
console.log(val);
this.draggableComponentList = val.filter(m => {
return m.create_type == 'draggable'
return m.panelclass == 'draggable'
});
this.drawComponentList = val.filter(m => {
return m.panelclass == 'draw'
});
this.clickComponentList = val.filter(m => {
return m.create_type == 'click'
this.chartComponentList = val.filter(m => {
return m.panelclass == 'chart'
});
}
}
@ -79,7 +91,8 @@ export default {
TypeName: title,//选中的工具栏svg类型名称
Title: title,//选中的工具栏svg标题
Color: default_attr.color,//选中的工具栏svg颜色
CreateType: create_type//选中工具栏的创建方式
CreateType: create_type,//选中工具栏的创建方式
EChartsOption: default_attr.echarts_option
};
this.$store.setCurrentlySelectedToolBarAction(CurrentlySelectedToolBar);
},

22
src/components/SvgComponents.vue
Unescape Escape View File

@ -6,6 +6,25 @@
:prop_data=component_prop></component>
</template>
<script>
import { use } from "echarts/core";
import { SVGRenderer } from "echarts/renderers";
import { PieChart,BarChart } from "echarts/charts";
import {
TitleComponent,
TooltipComponent,
LegendComponent,
GridComponent
} from "echarts/components";
import { THEME_KEY } from "vue-echarts";
use([
SVGRenderer,
PieChart,
TitleComponent,
TooltipComponent,
LegendComponent,
GridComponent,
BarChart
]);
let importComponents = {};
export default {
props: ['svgInfoData', 'component_prop'],
@ -15,6 +34,9 @@ export default {
}
},
components: importComponents,
provide: {
[THEME_KEY]: "dark"
},
methods: {
},

5
src/main.js
Unescape Escape View File

@ -1,3 +1,6 @@
/*
* @Author: yaolunmao
*/
/*
* @Author: yaolunmao
*/
@ -10,9 +13,11 @@ import './assets/css/index.css';
import router from './router';
import axios from 'axios';
import { store } from './store/store.js';
import ECharts from 'vue-echarts';
const app = createApp(App);
app.use(router);
app.config.globalProperties.$store = store;
app.config.globalProperties.$UCore = UCore;
app.config.globalProperties.$axios = axios;
app.component('v-chart', ECharts);
app.use(Antd).mount('#app');

9
src/store/store.js
Unescape Escape View File

@ -1,3 +1,6 @@
/*
* @Author: yaolunmao
*/
/*
* @Author: yaolunmao
* 简单状态管理
@ -12,7 +15,8 @@ export const store = {
TypeName: '',//选中的工具栏svg类型名称
Title: '',//选中的工具栏svg标题
Color: '',//选中的工具栏svg颜色
CreateType: ''//选中工具栏的创建方式
CreateType: '',//选中工具栏的创建方式
EChartsOption:''//选中工具栏的图表默认option
}
}),
@ -26,7 +30,8 @@ export const store = {
TypeName: '',//选中的工具栏svg类型名称
Title: '',//选中的工具栏svg标题
Color: '',//选中的工具栏svg颜色
CreateType: ''//选中工具栏的创建方式
CreateType: '',//选中工具栏的创建方式
EChartsOption:''//选中工具栏的图表默认option
}
}
}

7
src/views/CircuitEdit.vue
Unescape Escape View File

@ -141,6 +141,7 @@ export default {
testAddSvg: {
type: "testAddSvg",
title: "测试新增组件",
panelclass:"draggable",
template: "<path :fill=\"prop_data.svgColor\" :stroke=\"prop_data.svgColor\" stroke-width=\"5\" style=\"pointer-events:inherit\" d=\"m143.72081869586242,163.35565803158485 c14.617751633754164,-41.93617271978648 71.89058180534832,0 0,53.91793635401125 c-71.89058180534832,-53.91793635401125 -14.617751633754164,-95.85410907379776 0,-53.91793635401125 z\" fill-opacity=\"1\" stroke-opacity=\"1\" transform=\"translate(-145,-180)\"></path>",
props: ["prop_data"],
default_attr: {
@ -184,7 +185,6 @@ export default {
},
addSvgHandleOk () {
this.svgInfoData[this.svgInfoData.length]=this.testAddSvg;
console.log(this.svgInfoData);
this.addSvgVisible = false;
},
exportSvg () {
@ -354,11 +354,8 @@ export default {
this.$store.clearCurrentlySelectedToolBarAction();
},
testD () {
console.log(JSON.stringify(this.svgLists));
alert(JSON.stringify(this.svgLists));
},
testE () {
},
testH () {
localStorage.setItem('svginfo', JSON.stringify(this.svgLists));
this.$router.push({
@ -415,6 +412,7 @@ export default {
if (_this.$store.state.CurrentlySelectedToolBar.Type == '' || _this.$store.state.CurrentlySelectedToolBar.CreateType != 'draggable') {
return;
}
let eChartsOption=_this.$store.state.CurrentlySelectedToolBar.EChartsOption;
//根据类型和鼠标位置创建组件
let svgItem = {
id: _this.$UCore.GenUUid(),
@ -424,6 +422,7 @@ export default {
svgColor: _this.$store.state.CurrentlySelectedToolBar.Color,
svgPositionX: e.offsetX,
svgPositionY: e.offsetY,
echarts_option:eChartsOption?JSON.parse(eChartsOption):"",
size: 1,
angle: 0
//translate:`translate(${this.mousePosition.positionX},${this.mousePosition.positionY})`

Write Preview
Loading…
Cancel
Save