- <template>
- <!-- 河道横断面分析echarts -->
- <div :id="id" style="width: 100%; height: 100%"></div>
- </template>
- <script setup>
- import { guid } from '@/utils/ruoyi';
- import useUserStore from '@/store/modules/user';
- const pinias = useUserStore();
- const { proxy } = getCurrentInstance();
- const id = guid();
- const myChart = shallowRef('');
-
- const props = defineProps({
- //刷新标志
- refresh: {
- type: [String, Number],
- default: 1,
- },
- //数据
- echartData: {
- type: Object,
- default: {},
- },
- });
- watch(
- () => props.refresh,
- value => {
- //先销毁实例
- myChart.value && myChart.value.dispose();
- setTimeout(() => {
- intChart();
- });
- },
- { immediate: true }
- );
-
- //自适应
- function resizeTheChart() {
- if (myChart.value) {
- myChart.value.resize();
- }
- }
- function intChart() {
- myChart.value = proxy.echarts.init(document.getElementById(id));
- myChart.value.clear();
- // 绘制图表
- myChart.value.setOption({
- color: pinias.$state.chartColor,
- tooltip: {
- trigger: 'axis',
- confine: true, //是否将 tooltip 框限制在图表的区域内
- axisPointer: {
- type: 'shadow',
- },
- formatter: function (params) {
- var res = '<div><p>里程:' + params[0].name + ' m</div>'; // 字符串形式的html标签会被echarts转换渲染成数据,这个res主要是画的tooltip里的上部分的标题部分
- for (var i = 0; i < params.length; i++) {
- if (params[i].seriesName == '排口街道') {
- res += '<div><p>' + '';
- (' m</p></div>');
- } else {
- //因为是个数组,所以要遍历拿到里面的数据,并加入到tooltip的数据内容部分里面去
- res += `<div style="color: #004565;font-size: 14px; padding:0 12px;line-height: 24px">
- <span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;background-color:${[
- params[i].color, // 默认是小圆点,我们将其修改成有圆角的正方形,这里用的是模板字符串。并拿到对应颜色、名字、数据
- ]};"></span>
- ${params[i].seriesName}
- ${params[i].data} m
- </div>`;
- }
- }
-
- return res;
- },
- },
- // 显示暂无数据
- graphic: {
- type: 'text', // 类型:文本
- left: 'center',
- top: 'middle',
- silent: true, // 不响应事件
- invisible: props.echartData.xAxisData.length > 0 ? true : false, // 有数据就隐藏
- style: {
- fill: '#c6c6c6',
- fontWeight: 'bold',
- text: '暂无数据',
- fontFamily: 'Microsoft YaHei',
- fontSize: '18px',
- },
- },
- grid: {
- left: '5%',
- right: '5%',
- top: '15%',
- bottom: '8%',
- containLabel: true,
- },
- legend: {
- top: '0',
- orient: 'horizontal', //horizontal
- left: 'center', //left ,center
- textStyle: {
- color: 'inherit',
- },
- },
- xAxis: [
- {
- type: 'category',
- name: '里程(m)',
- nameTextStyle: {
- color: '#c6c6c6', //字体颜色
- fontSize: 12, //字体大小
- },
- boundaryGap: false,
- data: props.echartData.xAxisData,
- axisLabel: {
- color: '#c6c6c6',
- },
- axisLine: {
- lineStyle: {
- color: '#066592',
- },
- },
- },
- ],
- yAxis: [
- {
- name: 'm',
- type: 'value',
- min: '15',
- nameLocation: 'end', // 坐标轴名称显示位置
- nameGap: 15, // 坐标轴名称与轴线之间的距离
- nameTextStyle: {
- color: '#c6c6c6', //字体颜色
- fontSize: 12, //字体大小
- align: 'left', // 文字水平对齐方式,默认自动('left','center','right')
- },
- axisLabel: {
- color: '#c6c6c6',
- },
- splitLine: {
- lineStyle: {
- type: 'dashed',
- color: '#066592',
- },
- },
- },
- ],
- series: props.echartData.seriesData,
- });
-
- myChart.value.on('click', function (params) {
- if (params.componentType === 'markPoint') {
- // 点击到了 markPoint 上
- console.log(params.data.lonLat, 222);
- let lonLat = params.data.lonLat.split(',');
- newfiberMapbox.map.easeTo({
- center: [Number(lonLat[0]), Number(lonLat[1]) - 0.005],
- zoom: 16,
- });
- }
- });
- }
- onMounted(() => {
- window.addEventListener('resize', resizeTheChart);
- });
- onBeforeUnmount(() => {
- document.removeEventListener('resize', resizeTheChart());
- });
- </script>