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