绘制3D Echarts地图 饼图 堆叠柱状图
绘制3D Echarts
目前在项目中遇到过的3D echarts为：
1.3D饼图(圆环图)
2.3D区域地图
3.3D堆叠柱状图。
1.echarts + echarts-gl => 绘制3D地图
npm install echarts
npm install echarts-gl
//配置项代码 , this.chartData为我导入的随州市json数据
echarts.registerMap('随州市', this.suiZhou,this.chartData);
let self=this;
this.chart.setOption({
visualMap: [{
type: 'continuous',
show: false,
seriesIndex: 0,
text: ['bar3D'],
calculable: true,
max: 30,
}],
backgroundColor:'',
geo3D: {
map: '咸宁市',
top:'-10%',//地图位置
bottom:'2%',
left:'0%',//地图位置
roam: true,
//三维视觉属性
itemStyle: {
opacity: 1,
borderWidth: 0.8,
borderColor: '#147CBF'
},
viewControl: {
distance: 130,// 控制初始大小
alpha:60, //绕x轴旋转的角度（上下旋转），增大，视角顺时针增大（向上）
},
regionHeight: 5,//地图厚度
regions: [// 可对单个地图区域进行设置
{
name: '随县',
itemStyle: {
color: '#4E566B', // 单个区域的颜色
},
}
//......
],
//文字标签颜色
label: {
show: true,
textStyle: {
color: 'rgba(255,255,255,0.3)',
backgroundColor: '',
fontSize: 14,
fontWeight:600
},
},
itemStyle: {},
emphasis: { //当鼠标放上去 地区区域是否显示名称
label: {
show: true,
textStyle: {
color: '#fff',
fontSize: 13,
padding:14,
lineHeight:18,
backgroundColor: 'rgba(119,136,153,0.3)'
},
formatter: function (params) {
self.city=params.name;
let value=NaN
self.chartData.forEach(item=>{
if(item.name==params.name){
value=item.value
}
})
return params.name+'\n'+"项目数"+value ;
},
},
//高亮区块颜色
itemStyle: {
color: '#4FFFF5',
shadowOffsetX:40,
normal: {
color: '#2842E3'//【无效】，本想添加鼠标键入后提示框前的圆形色块，欢迎大佬指点！
}
},
},
series: [ //渲染地图
{
type: 'map',
coordinateSystem: 'geo',
},
]
},
})
2.highcharts => 绘制3D饼图
3D饼图又要做到有延长线添加文字highcharts是最好上手的了，标题附官方文档超链接，下载和配置上面都讲的很详细。
另外UI图实际的饼图有一个高低错落的效果，我有尝试在series.data每一项配置单独的slicedOffset(模块突起高度)发现无效，欢迎大佬们赐教！！
3.echarts => 绘制3D堆叠柱状图
(这部分是用echarts做，尽管hightcharts也有相同的demo，与我们公司设计有差于是没有采用，有相同设计的可以参考。最终效果如上，代码如下，参考博文
this.chart = echarts.init(document.getElementById('device_setting_chart'))
// 绘制图表
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
show: true,
left: '0%',
right: '4%',
bottom: '5%',
containLabel: true,
//最外边线不显示
borderColor:'rgb(30,30,126)',
top:'10%',
right:56,
},
backgroundColor:'',
xAxis: {
data: this.echartTime.reverse(),
nameTextStyle:{
//坐标轴右侧文字颜色
color:'#6078C3',
},
//坐标轴与文字颜色
axisLine:{
lineStyle:{
color:'#6078C3',
width: 0.4,
}
},
},
yAxis: {
nameTextStyle:{
//坐标轴文字颜色
color:'#6078C3',
},
splitNumber:3,
//坐标轴与文字颜色
axisLine:{
lineStyle:{
color:'#6078C3',
width: 0.4,
}
},
splitLine: {
show: true,
lineStyle:{
color: ['#6078C3'],
width: 0.4,
type: 'solid'
}
}
},
series: [
{ //配置项1
type: 'bar',
barWidth:8,
itemStyle:{
normal: {
// 左面立体图形的颜色
barBorderRadius:[0,0,0,180],
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#931622" // 0% 处的颜色
}, {
offset: 0.6,
color: "#CD2939" // 60% 处的颜色
}, {
offset: 1,
color: "#F83749" // 100% 处的颜色
}], false)
}
},
name:'在建项目',
data:this.data01.reverse(),
},{
name:'a',
tooltip:{
show:false
},
type: 'bar',
barWidth:8,
itemStyle:{
normal:{
barBorderRadius:[0,0,180,0],
// 右面立体图形的颜色
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#5E0A13" // 0% 处的颜色
}, {
offset: 0.6,
color: "#75121B" // 60% 处的颜色
}, {
offset: 1,
color: "#871922" // 100% 处的颜色
}], false)
}
},
data:this.data01.reverse(),
barGap:0
},{
name:'b',
tooltip:{
show:false
},
type: 'pictorialBar',
itemStyle: {
normal: {
color: '#FD6872', //上盖颜色
borderWidth:0,
borderColor:'#3c93fc'
}
},
symbol: 'diamond',
symbolRotate:0,
symbolSize: ['18','10'],
symbolOffset:['-48','-6'],
symbolPosition: 'end',
data:this.data01.reverse(),
z:3
},
//......省略其他相同柱状数据，按需配置即可
]
});