139 lines
3.4 KiB
Vue
139 lines
3.4 KiB
Vue
<template>
|
|
<div style="height:100%;width:100%" :id="echartsId"></div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import * as echarts from "echarts";
|
|
import { nextTick , onMounted, watch, defineProps } from "vue";
|
|
const props = defineProps({
|
|
echartsId:{
|
|
type:String,
|
|
default:'barHatId'
|
|
},
|
|
data:{
|
|
type:Object,
|
|
default:{
|
|
xDate: ['巴宜区', '工布江达县', '波密县', '朗县', '墨脱县', '察隅县', '米林县'],
|
|
list:[
|
|
{ name: "总数", value: [10,20,30,40,50,60,70] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
|
|
{ name: "已处置", value: [10,20,30,40,50,60,70],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF' },
|
|
],
|
|
}
|
|
}
|
|
});
|
|
|
|
watch(()=>props.data,val=>{
|
|
nextTick(()=>{ handleDate() })
|
|
},{immediate:true,deep:true})
|
|
|
|
// 处理数据
|
|
function handleDate() {
|
|
let xDate = props.data.xDate;
|
|
let legend = props.data.list.map(v=>{return {name:v.name}})
|
|
let series = props.data.list.map((item,i)=>{
|
|
let obj = {
|
|
name: item.name,
|
|
type: "bar",
|
|
data: item.value,
|
|
barWidth: "10px",
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0,0,0,1,[
|
|
{ offset: 0, color: item.color ? item.color[0] : "rgba(0,244,255,1)" },
|
|
{ offset: 1, color: item.color ? item.color[1] : "rgba(0,77,167,1)" }],false),
|
|
}
|
|
},
|
|
markPoint: {
|
|
symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
|
|
symbolSize: [11, 4], // 设置扁圆的宽和高
|
|
itemStyle: { color: item.hatColor || '#087df9' },// 圆盘颜色
|
|
data: item.value.map((obj, index) => ({
|
|
xAxis: index, // 对应柱子的横坐标
|
|
yAxis: obj + 0 // 柱子的值加上一些偏移量
|
|
}))
|
|
},
|
|
}
|
|
return obj
|
|
})
|
|
lineChartFn(xDate,legend,series)
|
|
}
|
|
|
|
function lineChartFn(xDate,legend,series) {
|
|
var myChart = echarts.init(document.getElementById(props.echartsId));
|
|
var option = {
|
|
legend: {
|
|
type: "plain",
|
|
show: true,
|
|
right: 0,
|
|
textStyle: { color: "#ddd" },
|
|
data: legend
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow"
|
|
}
|
|
},
|
|
grid: {
|
|
top: "25%",
|
|
right: "5%",
|
|
left: "10%",
|
|
bottom: "22%"
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
data: xDate,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "rgba(255,255,255,0.12)"
|
|
}
|
|
},
|
|
axisLabel: {
|
|
margin: 10,
|
|
color: "#e2e9ff",
|
|
textStyle: {
|
|
fontSize: 14
|
|
}
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
// name: '单位：万元',
|
|
axisLabel: {
|
|
formatter: "{value}",
|
|
color: "#e2e9ff"
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "rgba(255,255,255,1)"
|
|
}
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "rgba(255,255,255,0.12)"
|
|
}
|
|
}
|
|
}
|
|
],
|
|
series: series
|
|
};
|
|
option && myChart.setOption(option);
|
|
window.onresize = function () { myChart.resize(); };
|
|
document.getElementById(props.echartsId).setAttribute("_echarts_instance_", "");
|
|
}
|
|
onMounted(() => {
|
|
lineChartFn();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.circlecz {
|
|
height: 100%;
|
|
background: rgba(0,29,75,0.6);
|
|
border-radius: 0 0 4px 4px;
|
|
}
|
|
</style>
|