0
点赞
收藏
分享

微信扫一扫

实现svg动态插入图表

需求场景:项目需要实现在SVG组件中插入各种echarts的图表,并且能够正常显示与事件的使用。


解决方案:

方案一:先加载正常的图表,然后通过 $('#piSvg').append(图表) 来插入; 结果SVG是能正常查插入,并是相关事件都失效了,因为echarts是会生成div包住svg元素的,但是svg 又不是含有 div , 所以有问题。

方案二:然后就往SVG API方向查询资料,结果发现foreignObject 标准,能满足需求实现效果。

SVG <foreignObject>简介与截图等应用:

​​https://www.zhangxinxu.com/wordpress/2017/08/svg-foreignobject/​​


HTML代码:

<!--SVG元素-->
<svg id="piSvg" xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="orange" />

<!--echart-->
<foreignObject id="echart-foreign" x="200" y="0" width="800" height="400"></foreignObject>
<!--highchart-->
<foreignObject id="highchart-foreign" x="200" y="500" width="800" height="400"></foreignObject>

</svg>

<script>
$(function () {
// echart
PISVG.initEchart('echart-foreign')

// Highcharts
PISVG.initHighcharts('highchart-foreign')
})
</script>


JS代码:

/**
* svg组件
*/
PISVG = {
initEchart(eleId) {
var chartDom = document.getElementById(eleId);
var myChart = echarts.init(chartDom, null, { renderer: 'svg' });
var option = {
title: {
text: 'World Population'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
},
series: [
{
name: '2011',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230]
},
{
name: '2012',
type: 'bar',
data: [19325, 23438, 31000, 121594, 134141, 681807]
}
]
};
option && myChart.setOption(option);
},
initHighcharts(eleId) {
var chart = Highcharts.chart(eleId, {
title: {
text: '2010 ~ 2016 年太阳能行业就业人员发展情况'
},
subtitle: {
text: '数据来源:thesolarfoundation.com'
},
yAxis: {
title: {
text: '就业人数'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: '安装,实施人员',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: '工人',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
}
}

实现效果:

实现svg动态插入图表_echarts

举报

相关推荐

0 条评论