| | |
| | | {{ layerData.layerName }} |
| | | </div> |
| | | <div |
| | | :id="`myEcharts${chartsId}`" |
| | | id="myEcharts" |
| | | :style="{ width: width, height: height }" |
| | | ></div> |
| | | </template> |
| | |
| | | width: String, |
| | | height: String, |
| | | layerData: Object, |
| | | chartsId: String, |
| | | }); |
| | | let myEcharts = echarts; |
| | | let seriesData = ref([]); |
| | |
| | | xAxisData.value.push(e.len); |
| | | }); |
| | | data = trans(props.layerData.points); |
| | | console.log(data); |
| | | |
| | | seriesData.value = []; |
| | | data.forEach((e) => { |
| | | seriesData.value.push({ |
| | |
| | | type: "line", |
| | | smooth: true, |
| | | symbol: "none", //取消折点圆圈 |
| | | itemStyle: { |
| | | normal: { |
| | | label: { |
| | | show: false, |
| | | position: "top", |
| | | formatter: "{c}", |
| | | }, |
| | | label: { |
| | | label: { |
| | | show: false, |
| | | position: "top", |
| | | formatter: "{c}", |
| | | }, |
| | | }, |
| | | }); |
| | | }); |
| | | console.log(seriesData.value); |
| | | |
| | | nextTick(() => { |
| | | initChart(); |
| | |
| | | type: "line", |
| | | smooth: true, |
| | | symbol: "none", //取消折点圆圈 |
| | | itemStyle: { |
| | | normal: { |
| | | label: { |
| | | show: false, |
| | | position: "top", |
| | | formatter: "{c}", |
| | | }, |
| | | label: { |
| | | label: { |
| | | show: false, |
| | | position: "top", |
| | | formatter: "{c}", |
| | | }, |
| | | }, |
| | | }); |
| | |
| | | } |
| | | function initChart() { |
| | | let chart = myEcharts.init( |
| | | document.getElementById(`myEcharts${props.chartsId}`), |
| | | document.getElementById(`myEcharts`), |
| | | "purple-passion" |
| | | ); |
| | | chart.setOption({ |
| | |
| | | name: "米(m)", |
| | | type: "category", |
| | | data: xAxisData.value, |
| | | show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字 |
| | | show: true, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字 |
| | | axisTick: { |
| | | show: false, // 不显示坐标轴刻度线 |
| | | show: true, // 不显示坐标轴刻度线 |
| | | }, |
| | | axisLine: { |
| | | show: false, // 不显示坐标轴线 |
| | | show: true, // 不显示坐标轴线 |
| | | }, |
| | | axisLabel: { |
| | | show: false, // 不显示坐标轴上的文字 |
| | | show: true, // 不显示坐标轴上的文字 |
| | | showMinLabel: true, // 强制显示最小值标签 |
| | | showMaxLabel: true, // 强制显示最大值标签 |
| | | }, |
| | |
| | | }, |
| | | yAxis: { |
| | | type: "value", |
| | | show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字 |
| | | show: true, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字 |
| | | axisTick: { |
| | | show: false, // 不显示坐标轴刻度线 |
| | | show: true, // 不显示坐标轴刻度线 |
| | | }, |
| | | axisLine: { |
| | | show: false, // 不显示坐标轴线 |
| | | show: true, // 不显示坐标轴线 |
| | | }, |
| | | axisLabel: { |
| | | show: false, // 不显示坐标轴上的文字 |
| | | show: true, // 不显示坐标轴上的文字 |
| | | }, |
| | | splitLine: { |
| | | show: false, // 不显示网格线 |
| | | show: true, // 不显示网格线 |
| | | }, |
| | | }, |
| | | series: seriesData.value, |