lcw
This commit is contained in:
@ -3,157 +3,146 @@
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import { defineProps, watch, nextTick } from "vue";
|
||||
import { onMounted, ref, reactive, defineProps, onUnmounted, watch, nextTick } from "vue";
|
||||
const props = defineProps({
|
||||
echartsId:{
|
||||
type:String,
|
||||
default:'lineId'
|
||||
default:'3DbarId'
|
||||
},
|
||||
data:{
|
||||
type:Object,
|
||||
default:{
|
||||
list:[],
|
||||
colors:[],
|
||||
topColor:'#1bd6c2'
|
||||
}
|
||||
data:{
|
||||
type:Array,
|
||||
default:[]
|
||||
}
|
||||
});
|
||||
watch(()=>props.data,val=>{
|
||||
nextTick(()=>{ haandleData(val) })
|
||||
},{immediate:true,deep:true})
|
||||
|
||||
const haandleData = (data)=>{
|
||||
let val = [],x_value=[]
|
||||
let color = data.colors;
|
||||
let topColor = data.topColor;
|
||||
data.list.forEach(item=>{
|
||||
val.push(item.val);
|
||||
x_value.push(item.label);
|
||||
})
|
||||
chartFn(val,x_value,color,topColor)
|
||||
}
|
||||
// 保存echarts实例
|
||||
const myChart = ref(null);
|
||||
|
||||
function chartFn(val,x_value,color,topColor) {
|
||||
var myChart = echarts.init(document.getElementById(props.echartsId));
|
||||
const sideData1 = val//[100, 110, 120, 134, 190, 230];
|
||||
const name = ''; //"销量";
|
||||
var x_value = x_value;//['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
var option = {
|
||||
tooltip: { trigger: 'axis' },
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
// 定义resize处理函数
|
||||
const handleResize = () => {
|
||||
if (myChart.value) {
|
||||
myChart.value.resize();
|
||||
}
|
||||
};
|
||||
|
||||
function chartFn() {
|
||||
// 如果已有实例，先销毁
|
||||
if (myChart.value) {
|
||||
myChart.value.dispose();
|
||||
}
|
||||
|
||||
// 创建新实例
|
||||
myChart.value = echarts.init(document.getElementById(props.echartsId));
|
||||
|
||||
// 处理数据
|
||||
const sideData1 = props.data.map(v => {
|
||||
return {
|
||||
value: v.value * 1.2,
|
||||
itemStyle: {
|
||||
color: v.color || '#1bd6c2'
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const topData1 = props.data.map(v => {
|
||||
return {
|
||||
value: v.value + 0.1,
|
||||
itemStyle: {
|
||||
color: v.color || '#1bd6c2'
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const option = {
|
||||
grid: {
|
||||
top:"30px",
|
||||
left:"5px",
|
||||
right:"0px",
|
||||
bottom:"10%",
|
||||
top: '8%',
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '12%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: '#ddd'
|
||||
}
|
||||
},
|
||||
backgroundColor: 'rgba(255,255,255,1)',
|
||||
padding: [5, 10],
|
||||
textStyle: {
|
||||
color: '#7588E4'
|
||||
},
|
||||
extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
data: x_value,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff" //X轴文字颜色
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: props.data.map(v => v.label),
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#fff',
|
||||
interval: 0
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name:'',
|
||||
nameTextStyle: { color: "#fff" },
|
||||
type: 'value',
|
||||
splitLine: { show: false },
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#FFF" //X轴文字颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: 'rgba(14,95,255,0.5)'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff'
|
||||
}
|
||||
],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: name,
|
||||
tooltip: { show: false },
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
data: props.data.map(v => v.value),
|
||||
barWidth: '22', // 柱子的宽度
|
||||
z: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||||
offset: 0,
|
||||
color: color ? color[0] : '#28EEBF'// 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: color ? color[1] : '#0DBAC5', // 100% 处的颜色
|
||||
}], false)
|
||||
}
|
||||
},
|
||||
data: sideData1,
|
||||
barGap: 0,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
distance: 10,
|
||||
textStyle: {
|
||||
color: '#0EBBC5',
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
formatter: '{c}'
|
||||
color: '#004056' // 底部柱子的颜色
|
||||
}
|
||||
},
|
||||
{
|
||||
name: name,
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||||
offset: 0,
|
||||
color: color ? color[0] : '#28EEBF'// 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: color ? color[1] : '#0DBAC5', // 100% 处的颜色
|
||||
}], false)
|
||||
}
|
||||
},
|
||||
barGap: 0,
|
||||
data: sideData1,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'top',
|
||||
textStyle: {
|
||||
color: 'white',
|
||||
fontSize: 10
|
||||
barWidth: '22', // 柱子的宽度
|
||||
z: 2,
|
||||
itemStyle: {
|
||||
color: function(params) {
|
||||
return params.data.itemStyle.color || '#1bd6c2';
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: name,
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
type: 'pictorialBar',
|
||||
type: 'scatter',
|
||||
data: topData1,
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#fff',
|
||||
color: topColor || '#1bd6c2' // 顶部方块的颜色
|
||||
color: function(params) {
|
||||
return params.data.itemStyle.color || '#1bd6c2';
|
||||
}
|
||||
},
|
||||
symbol: 'path://M 0,0 l 90,0 l -60,60 l -90,0 z',
|
||||
symbolSize: ['22', '12'], // 第一个值控制顶部方形大小
|
||||
symbolOffset: ['-0', '-6'], // 控制顶部放行 左右和上下
|
||||
symbolSize: ['22', '12'],
|
||||
symbolOffset: ['-0', '-6'],
|
||||
symbolRotate: -30,
|
||||
symbolPosition: 'end',
|
||||
barGap: 0,
|
||||
@ -162,11 +151,29 @@ function chartFn(val,x_value,color,topColor) {
|
||||
}
|
||||
]
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
window.addEventListener('resize',function(){
|
||||
myChart.resize();
|
||||
})
|
||||
|
||||
option && myChart.value.setOption(option);
|
||||
}
|
||||
|
||||
// 监听数据变化
|
||||
watch(() => props.data, val => {
|
||||
nextTick(() => { chartFn() })
|
||||
}, { immediate: true, deep: true })
|
||||
|
||||
// 组件挂载时初始化图表并添加事件监听
|
||||
onMounted(() => {
|
||||
chartFn();
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
// 组件卸载时清理资源
|
||||
onUnmounted(() => {
|
||||
if (myChart.value) {
|
||||
myChart.value.dispose();
|
||||
myChart.value = null;
|
||||
}
|
||||
window.removeEventListener('resize', handleResize);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Reference in New Issue
Block a user