|
|
@@ -5,173 +5,278 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
- import { ref, reactive, onMounted, nextTick, defineProps } from 'vue';
|
|
|
- import * as echarts from 'echarts';
|
|
|
-
|
|
|
- let props = defineProps({
|
|
|
- //距离边缘的距离
|
|
|
- gridV: {
|
|
|
- type: Object,
|
|
|
- default: () => {
|
|
|
- return {
|
|
|
- top: '8%',
|
|
|
- left: '3%',
|
|
|
- right: '3%',
|
|
|
- bottom: '10%',
|
|
|
- };
|
|
|
- },
|
|
|
+import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
|
|
|
+import * as echarts from 'echarts';
|
|
|
+
|
|
|
+let props = defineProps({
|
|
|
+ //距离边缘的距离
|
|
|
+ gridV: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {};
|
|
|
},
|
|
|
- });
|
|
|
+ },
|
|
|
+ echartData: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {}
|
|
|
+ }
|
|
|
+ }
|
|
|
+});
|
|
|
|
|
|
- //获取don元素节点
|
|
|
- let line = ref();
|
|
|
-
|
|
|
- function getOption() {
|
|
|
- nextTick(() => {
|
|
|
- let myChart = echarts.init(line.value);
|
|
|
- let option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'line',
|
|
|
- lineStyle: {
|
|
|
- color: {
|
|
|
- type: 'linear',
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 0,
|
|
|
- y2: 1,
|
|
|
- colorStops: [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: 'rgba(31, 179, 247,0)',
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 0.5,
|
|
|
- color: 'rgba(31, 179, 247,1)',
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: 'rgba(31, 179, 247,0)',
|
|
|
- },
|
|
|
- ],
|
|
|
- global: false,
|
|
|
- },
|
|
|
+//获取don元素节点
|
|
|
+let line = ref();
|
|
|
+
|
|
|
+let gridVs = reactive({
|
|
|
+ top: '',
|
|
|
+ left: '',
|
|
|
+ right: '',
|
|
|
+ bottom: '',
|
|
|
+})
|
|
|
+
|
|
|
+let echartDatas = reactive({
|
|
|
+ xData:[],
|
|
|
+ yData:[],
|
|
|
+ yData1:[],
|
|
|
+ legendName:[]
|
|
|
+})
|
|
|
+
|
|
|
+function getOption() {
|
|
|
+ nextTick(() => {
|
|
|
+ let myChart = echarts.init(line.value);
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ backgroundColor: 'rgba(0, 0, 0, .6)',
|
|
|
+ borderColor: '#2395c8',
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ type: 'line',
|
|
|
+ lineStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(31, 179, 247,0)',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: 'rgba(31, 179, 247,1)',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(31, 179, 247,0)',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ global: false,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
- grid: props.gridV,
|
|
|
- xAxis: [
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ align: 'left',
|
|
|
+ right: 'center',
|
|
|
+ top: '2%',
|
|
|
+ type: 'plain',
|
|
|
+ textStyle: {
|
|
|
+ color: '#7ec7ff',
|
|
|
+ fontSize: 14,
|
|
|
+ },
|
|
|
+ // icon:'rect',
|
|
|
+ itemGap: 25,
|
|
|
+ itemWidth: 18,
|
|
|
+ icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
|
|
|
+ data: [
|
|
|
{
|
|
|
- //x轴
|
|
|
- type: 'category', //数据类型为不连续数据
|
|
|
- boundaryGap: false, //坐标轴两边是否留白
|
|
|
- axisLine: {
|
|
|
- //坐标轴轴线相关设置。数学上的x轴
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(100, 99, 99,.5)',
|
|
|
- type: 'dashed',
|
|
|
- },
|
|
|
+ name: echartDatas.legendName.length!=0 ? echartDatas.legendName[0] : '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: echartDatas.legendName.length>1 ? echartDatas.legendName[1] : '',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ grid: gridVs,
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ //x轴
|
|
|
+ type: 'category', //数据类型为不连续数据
|
|
|
+ boundaryGap: false, //坐标轴两边是否留白
|
|
|
+ axisLine: {
|
|
|
+ //坐标轴轴线相关设置。数学上的x轴
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(100, 99, 99,.5)',
|
|
|
+ type: 'dashed',
|
|
|
},
|
|
|
- axisLabel: {
|
|
|
- fontSize: 14,
|
|
|
- // margin: 10,
|
|
|
- textStyle: {
|
|
|
- color: '#b3b8cc',
|
|
|
- },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 14,
|
|
|
+ // margin: 10,
|
|
|
+ textStyle: {
|
|
|
+ color: '#b3b8cc',
|
|
|
},
|
|
|
- axisTick: { show: true }, //刻度点数轴
|
|
|
- splitLine: {
|
|
|
- show: false,
|
|
|
+ },
|
|
|
+ axisTick: { show: true }, //刻度点数轴
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ data: echartDatas.xData.length!=0 ? echartDatas.xData : [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ //y轴的相关设置
|
|
|
+ type: 'value', //y轴数据类型为连续的数据
|
|
|
+ min: 0, //y轴上的刻度最小值
|
|
|
+ // splitNumber: 7,//y轴上的刻度段数
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(100, 99, 99,.5)',
|
|
|
+ type: 'dashed',
|
|
|
},
|
|
|
- data: ['12.1', '12.2', '12.3', '12.4', '12.5', '12.6', '12.7'],
|
|
|
},
|
|
|
- ],
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
+ axisLine: {
|
|
|
//y轴的相关设置
|
|
|
- type: 'value', //y轴数据类型为连续的数据
|
|
|
- min: 0, //y轴上的刻度最小值
|
|
|
- // splitNumber: 7,//y轴上的刻度段数
|
|
|
- splitLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(100, 99, 99,.5)',
|
|
|
- type: 'dashed',
|
|
|
- },
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- //y轴的相关设置
|
|
|
- show: false,
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ margin: 20,
|
|
|
+ textStyle: {
|
|
|
+ color: '#b3b8cc',
|
|
|
},
|
|
|
- axisLabel: {
|
|
|
- show: true,
|
|
|
- margin: 20,
|
|
|
- textStyle: {
|
|
|
- color: '#b3b8cc',
|
|
|
- },
|
|
|
+ },
|
|
|
+ axisTick: { show: true }, //刻度点数轴
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name:echartDatas.legendName.length!=0 ? echartDatas.legendName[0] : '',
|
|
|
+ type: 'line', //统计图类型为折线图
|
|
|
+ smooth: false, //是否平滑曲线显示
|
|
|
+ symbolSize: 0, //数据点的大小，[0,0]//b表示宽度和高度
|
|
|
+ lineStyle: {
|
|
|
+ //线条的相关设置
|
|
|
+ normal: {
|
|
|
+ color: '#1faef0', // 线条颜色
|
|
|
},
|
|
|
- axisTick: { show: true }, //刻度点数轴
|
|
|
},
|
|
|
- ],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '',
|
|
|
- type: 'line', //统计图类型为折线图
|
|
|
- smooth: false, //是否平滑曲线显示
|
|
|
- symbolSize: 0, //数据点的大小，[0,0]//b表示宽度和高度
|
|
|
- lineStyle: {
|
|
|
- //线条的相关设置
|
|
|
- normal: {
|
|
|
- color: '#3deaff', // 线条颜色
|
|
|
- },
|
|
|
+ itemStyle: {
|
|
|
+ color: "#1faef0",
|
|
|
+ borderColor: "#1faef0",
|
|
|
+ borderWidth: 1
|
|
|
+
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ //区域填充样式
|
|
|
+ normal: {
|
|
|
+ //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ [
|
|
|
+ { offset: 0, color: 'rgba(31, 174, 240, 0.7)' },
|
|
|
+ { offset: 0.7, color: 'rgba(31, 174, 240, 0)' },
|
|
|
+ ],
|
|
|
+ false,
|
|
|
+ ),
|
|
|
+
|
|
|
+ shadowColor: 'rgba(31, 174, 240, 0.6)', //阴影颜色
|
|
|
+ shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
|
|
},
|
|
|
- areaStyle: {
|
|
|
- //区域填充样式
|
|
|
- normal: {
|
|
|
- //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
|
|
- color: new echarts.graphic.LinearGradient(
|
|
|
- 0,
|
|
|
- 0,
|
|
|
- 0,
|
|
|
- 1,
|
|
|
- [
|
|
|
- { offset: 0, color: 'rgba(61,234,255, 0.9)' },
|
|
|
- { offset: 0.7, color: 'rgba(61,234,255, 0)' },
|
|
|
- ],
|
|
|
- false,
|
|
|
- ),
|
|
|
-
|
|
|
- shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
|
|
|
- shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
|
|
- },
|
|
|
+ },
|
|
|
+ data: echartDatas.yData.length!=0 ? echartDatas.yData : [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: echartDatas.legendName.length>1 ? echartDatas.legendName[1] : '',
|
|
|
+ type: 'line', //统计图类型为折线图
|
|
|
+ smooth: false, //是否平滑曲线显示
|
|
|
+ symbolSize: 0, //数据点的大小，[0,0]//b表示宽度和高度
|
|
|
+ lineStyle: {
|
|
|
+ //线条的相关设置
|
|
|
+ normal: {
|
|
|
+ color: '#1ef49f', // 线条颜色
|
|
|
},
|
|
|
- data: [90, 105, 84, 125, 110, 92, 98],
|
|
|
},
|
|
|
- ],
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
- window.onresize = function () {
|
|
|
- myChart.resize();
|
|
|
- };
|
|
|
- });
|
|
|
- }
|
|
|
+ itemStyle: {
|
|
|
+ color: "#1ef49f",
|
|
|
+ borderColor: "#1ef49f",
|
|
|
+ borderWidth: 1
|
|
|
|
|
|
- onMounted(() => {
|
|
|
- getOption();
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ //区域填充样式
|
|
|
+ normal: {
|
|
|
+ //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ [
|
|
|
+ { offset: 0, color: 'rgba(31, 237, 155, 0.7)' },
|
|
|
+ { offset: 0.7, color: 'rgba(31, 237, 155, 0)' },
|
|
|
+ ],
|
|
|
+ false,
|
|
|
+ ),
|
|
|
+
|
|
|
+ shadowColor: 'rgba(31, 237, 155, 0.6)', //阴影颜色
|
|
|
+ shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: echartDatas.yData1.length!=0 ? echartDatas.yData1 : [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ window.onresize = function () {
|
|
|
+ myChart.resize();
|
|
|
+ };
|
|
|
});
|
|
|
+}
|
|
|
+
|
|
|
+watch(() => props.gridV, (newV, oldV) => {
|
|
|
+ console.log(newV, 'gird--------')
|
|
|
+ gridVs.top = newV.top
|
|
|
+ gridVs.left = newV.left
|
|
|
+ gridVs.right = newV.right
|
|
|
+ gridVs.bottom = newV.bottom
|
|
|
+}, { immediate: true, deep: true })
|
|
|
+
|
|
|
+watch(() => props.echartData, (newE, oldE) => {
|
|
|
+ console.log(newE, 'echartData---------')
|
|
|
+ echartDatas.xData = newE.xData
|
|
|
+ echartDatas.yData = newE.yData
|
|
|
+ echartDatas.yData1=newE.yData1
|
|
|
+ echartDatas.legendName=newE.legendName
|
|
|
+}, { immediate: true, deep: true })
|
|
|
+
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getOption();
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
- .basicEchartLine {
|
|
|
- position: relative;
|
|
|
+.basicEchartLine {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .echart-box {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
-
|
|
|
- .echart-box {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
