junhong
2 weeks ago
parent
82d3b5c675
commit
07c98707a8
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 79 KiB |
|
After Width: | Height: | Size: 659 B |
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,41 @@ |
|||||||
|
import * as echarts from "echarts"; |
||||||
|
export function echart({ |
||||||
|
id, |
||||||
|
grid, |
||||||
|
fn, |
||||||
|
changbs, |
||||||
|
val, |
||||||
|
chat |
||||||
|
}) { |
||||||
|
// let myChart = chat ? chat : null
|
||||||
|
let myChart = null |
||||||
|
// if (val) {
|
||||||
|
|
||||||
|
// }
|
||||||
|
let dom = document.getElementById(id) |
||||||
|
dom.removeAttribute('_echarts_instance_'); |
||||||
|
myChart = echarts.init(document.getElementById(id)); |
||||||
|
// myChart.clear()
|
||||||
|
const option = grid |
||||||
|
myChart.on('click', function (params) { |
||||||
|
if (fn) fn(params, myChart) |
||||||
|
}); |
||||||
|
myChart.on('geoRoam', function (params) { |
||||||
|
var option = myChart.getOption(); |
||||||
|
if (option.geo) { |
||||||
|
var geo = option.series[0]; // 获取当前地图的配置
|
||||||
|
// 更新其他地图的 zoom 和 center 属性
|
||||||
|
// option.series[1].label.rich.name.fontSize = 16 * geo.zoom
|
||||||
|
// option.series[1].label.rich.pt.fontSize = 14 * geo.zoom
|
||||||
|
// option.series[1].label.fontSize = 14 * geo.zoom
|
||||||
|
option.geo[0].zoom = geo.zoom; |
||||||
|
option.geo[0].center = geo.center; |
||||||
|
myChart.setOption(option, true, false); |
||||||
|
} |
||||||
|
}); |
||||||
|
myChart.setOption(option, true); |
||||||
|
window.addEventListener("resize", function () { |
||||||
|
myChart.resize(); |
||||||
|
}); |
||||||
|
return myChart; |
||||||
|
} |
||||||
@ -0,0 +1,165 @@ |
|||||||
|
import * as echarts from "echarts"; |
||||||
|
// import 'echarts-liquidfill/src/liquidFill.js'; //在这里引入
|
||||||
|
export function echartsBing({ }) { |
||||||
|
return { |
||||||
|
color: ['#fff17d', '#23BDF9'], |
||||||
|
// 图表标题
|
||||||
|
title: { |
||||||
|
text: '总数', |
||||||
|
subtext: 15, |
||||||
|
textStyle: { |
||||||
|
color: '#fff', |
||||||
|
fontSize: 14, |
||||||
|
align: 'center' |
||||||
|
}, |
||||||
|
subtextStyle: { |
||||||
|
fontSize: 14, |
||||||
|
color: ['#fff'], |
||||||
|
verticalAlign: 'center' // 副标题垂直居中
|
||||||
|
}, |
||||||
|
left: '25%', // 整体标题水平居中放置，这里用center替代x属性
|
||||||
|
top: '48%' // 整体标题垂直居中放置，这里用top替代y属性
|
||||||
|
}, |
||||||
|
// 图例
|
||||||
|
legend: [{ |
||||||
|
center: 'position', |
||||||
|
top: '43%', |
||||||
|
right: '20%', |
||||||
|
icon: 'circle', |
||||||
|
itemWidth: 12, |
||||||
|
itemHeight: 12, |
||||||
|
textStyle: { |
||||||
|
color: '#fff', |
||||||
|
padding: [0, 0, 0, 5] |
||||||
|
}, |
||||||
|
data: ['施工机械数'] |
||||||
|
}, |
||||||
|
{ |
||||||
|
center: 'position', |
||||||
|
top: '57%', |
||||||
|
right: '20%', |
||||||
|
icon: 'circle', |
||||||
|
itemWidth: 12, |
||||||
|
itemHeight: 12, |
||||||
|
textStyle: { |
||||||
|
color: '#fff', |
||||||
|
padding: [0, 0, 0, 5] |
||||||
|
}, |
||||||
|
data: ['运输车辆数'] |
||||||
|
}], |
||||||
|
// 系列列表，每个系列通过 type 决定图表类型
|
||||||
|
series: [{ |
||||||
|
name: '车辆机械设备分布', |
||||||
|
type: 'pie', |
||||||
|
radius: ['40%', '60%'], // 环形图内外半径
|
||||||
|
center: ['30%', '60%'], |
||||||
|
avoidLabelOverlap: false, |
||||||
|
label: { |
||||||
|
show: false, |
||||||
|
position: 'center' |
||||||
|
}, |
||||||
|
labelLine: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
data: [ |
||||||
|
{ value: 75, name: '施工机械数' }, |
||||||
|
{ value: 25, name: '运输车辆数' } |
||||||
|
] |
||||||
|
}] |
||||||
|
} |
||||||
|
} |
||||||
|
export function echartsZhu({ |
||||||
|
ydata, |
||||||
|
xdata, |
||||||
|
}) { |
||||||
|
return { |
||||||
|
tooltip: { |
||||||
|
trigger: "axis", |
||||||
|
}, |
||||||
|
// 设置折线颜色
|
||||||
|
// color:['linear-gradient( 90deg, rgba(10,254,239,0) 0%, #0AFEEF 100%'],
|
||||||
|
xAxis: { |
||||||
|
|
||||||
|
// 类目
|
||||||
|
type: 'category', |
||||||
|
data: xdata ? xdata : [], |
||||||
|
// 文字
|
||||||
|
axisLabel: { |
||||||
|
color: '#CEE0E0', |
||||||
|
fontSize: 10, |
||||||
|
}, |
||||||
|
// 线
|
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: 'rgba(0,0,0,0.1)', |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
yAxis: [{ |
||||||
|
// 值
|
||||||
|
name: '单位：人', |
||||||
|
nameTextStyle: { // 添加这个属性设置名称样式
|
||||||
|
color: '#CEE0E0', |
||||||
|
fontSize: 12, // 可选：设置字体大小
|
||||||
|
fontWeight: 'normal' // 可选：设置字体粗细
|
||||||
|
}, |
||||||
|
type: 'value', |
||||||
|
axisLabel: { |
||||||
|
color: '#CEE0E0', |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: 'rgba(0,0,0,0.1)', |
||||||
|
} |
||||||
|
}, |
||||||
|
splitLine: { //改变横向网格线的颜色
|
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: ['rgb(206,224,224,0.15)'], |
||||||
|
width: 1, |
||||||
|
type: 'solid' |
||||||
|
}, |
||||||
|
}, |
||||||
|
}], |
||||||
|
grid: { |
||||||
|
top: '15%', |
||||||
|
left: '7.5%', |
||||||
|
bottom: '12%', |
||||||
|
right: '3%', |
||||||
|
}, |
||||||
|
series: [{ |
||||||
|
data: ydata ? ydata : [], |
||||||
|
type: 'bar', |
||||||
|
name: '人数', |
||||||
|
// 柱子宽度
|
||||||
|
barWidth: 15, |
||||||
|
// 柱子间距
|
||||||
|
barGap: 1, |
||||||
|
itemStyle: { |
||||||
|
normal: { |
||||||
|
label: { |
||||||
|
show: true, //开启显示
|
||||||
|
position: 'top', //在上方显示
|
||||||
|
textStyle: { //数值样式
|
||||||
|
color: 'white', |
||||||
|
fontSize: 12 |
||||||
|
} |
||||||
|
}, |
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
||||||
|
offset: 0, |
||||||
|
color: '#0AA0FE', |
||||||
|
}, { |
||||||
|
offset: 0.5, |
||||||
|
color: '#0964a1' |
||||||
|
}, { |
||||||
|
offset: 1, |
||||||
|
color: '#092b48' |
||||||
|
}]), |
||||||
|
opacity: 1, |
||||||
|
} |
||||||
|
} |
||||||
|
}] |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue