Vue3使用echart实现病虫害视图效果，包含图文标记点，双y轴刻度线， dataZoom，自定义tooltip，areaStyle，markArea，markLine等效果。

1. 最近做农业相关项目，需要实现病虫害展示模型效果，这里使用 echart实现(各种查看文档才实现出来)。
      

   npm install echarts --save

2. 虫害展示效果及代码
   
   
   
    

   <!-- 虫害模型 -->
   <template>
     <div class="containers">
       <div class="top-div">
         <span class="left-span" style="margin-right: 10px"> 虫害发育日度 <span style="color: rgb(255, 0, 0); font-size: 13px">10.7</span> ℃ </span>
         <span class="right-span" style="margin-right: 20px">当前累积积温：656.6日度</span>
       </div>
   
       <div id="main" style="width: 100%; height: 500px; margin-top: 10px"></div>
     </div>
   </template>
   
   <script setup lang="ts">
     import { onMounted, ref } from 'vue';
     import * as echarts from 'echarts';
     import { insectDataNote, insectData, insectImage } from './data';
     const eData = ref({}); // 模型数据
     const xAxisData = ref([]); //x轴数据
     const yAxisData = ref([]); //空气温度
     const yAxisData2 = ref([]); //有效积温
     const yAxisData3 = ref([]); // 虫害图文效果
     const echartTypes = ['空气温度', '有效积温'];
     const echartTypesColor = ['#1890ff', '#ff351d'];
     onMounted(() => {
       if (insectData.code == 200) {
         eData.value = insectData.data;
         let dataNote = insectDataNote.data;
         eData.value.actemperInfos.forEach((element) => {
           xAxisData.value.push(element.datetime);
           yAxisData.value.push(element.actemper);
           yAxisData2.value.push(element.temperature);
           let some = dataNote.some((item) => item.thattime == element.datetime);
           if (some) {
             yAxisData3.value.push(element.temperature);
           } else {
             yAxisData3.value.push('');
           }
         });
       }
       console.log(yAxisData3.value);
       var myChart = echarts.init(document.getElementById('main'));
       var option = {
         color: echartTypesColor,
         dataZoom: [{ type: 'slider', xAxisIndex: [0], start: 90, end: 100 }],
         tooltip: {
           trigger: 'axis',
           formatter: (params) => {
             // 自定义提示信息
             let paramStr = '<div style="max-width:200px">';
             if (params[2].value) {
               paramStr +=
                 '<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20170928%2Ff361a75ce5e04b158aff3798b428d637.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658047927&t=1429c9c7cfb74dea9ded3d011d667c7d" style="height:100px;width:200px">' +
                 '<br/>';
             }
             paramStr += params[0].name + '<br/>';
             for (var i = 0; i < params.length; i++) {
               if (i < 2) {
                 let param = params[i];
                 paramStr += `${param.marker}${param.seriesName}：${param.value}℃<br/>`;
               } else {
                 if (params[2].value) {
                   let findData = insectDataNote.data.find((item) => params[0].name == item.thattime);
                   paramStr += `${findData?.content}<br/>`;
                   paramStr += `<span style='white-space:pre-wrap'>预防措施：${findData.measures}</span><br/>`;
                 }
               }
             }
             paramStr += '</div>';
   
             return paramStr;
           },
         },
         legend: {
           x: '4%',
           data: echartTypes,
           icon: 'circle',
           position: 'left',
         },
         xAxis: {
           type: 'category',
           boundaryGap: false,
           data: xAxisData.value,
           axisLabel: {
             formatter: (params) => {
               return params.substring(5, 11);
             },
           },
         },
         yAxis: [
           {
             axisTick: {
               //显示分割线
               show: true,
             },
             name: echartTypes[0] + ' ℃',
             nameLocation: 'middle',
             nameGap: 50, //坐标轴名称与轴线之间的距离
             nameTextStyle: {
               color: '#fff',
               backgroundColor: echartTypesColor[0],
               padding: 10,
               borderRadius: 5,
               fontWeight: 'normal',
             },
             type: 'value',
             axisLabel: {
               formatter: '{value} °C',
               color: echartTypesColor[0],
             },
             min: 0,
             max: 100,
             interval: 20, //间隔
             axisLine: {
               show: true,
               lineStyle: {
                 fontSize: 12,
                 color: echartTypesColor[0],
               },
             },
           },
           {
             axisTick: {
               //显示分割线
               show: true,
             },
             name: echartTypes[1] + ' ℃',
             nameLocation: 'middle',
             nameGap: 60, //坐标轴名称与轴线之间的距离
             nameTextStyle: {
               color: '#fff',
               backgroundColor: echartTypesColor[1],
               padding: 10,
               borderRadius: 5,
             },
             type: 'value',
             axisLabel: {
               formatter: '{value} °C',
               color: echartTypesColor[1],
             },
             axisLine: {
               show: true,
               lineStyle: {
                 fontSize: 12,
                 color: echartTypesColor[1],
               },
             },
           },
         ],
         series: [
           {
             // 相对温度
             name: echartTypes[0],
             type: 'line',
             data: yAxisData2.value,
             symbol: 'circle', //标记的图形为实心圆
             symbolSize: 11, //标记的大小
             smooth: true, //面积图改成弧形状
             itemStyle: {
               normal: {
                 lineStyle: {
                   width: 3, //折线宽度
                 },
               },
             },
             markLine: {
               lineStyle: {
                 width: 1.7,
                 type: 'solid',
                 color: '#ff351d',
               },
               data: [{ type: 'average', name: '平均值' }],
             },
           },
           {
             // 有效积温
             name: echartTypes[1],
             type: 'line',
             yAxisIndex: 1,
             data: yAxisData.value,
             symbol: 'circle', //标记的图形为实心圆
             symbolSize: 11, //标记的大小
             smooth: true, //面积图改成弧形状
             itemStyle: {
               normal: {
                 lineStyle: {
                   width: 3, //折线宽度
                 },
               },
             },
             areaStyle: {
               //区域填充渐变颜色
               color: {
                 type: 'linear',
                 x: 0,
                 y: 0,
                 x2: 0,
                 y2: 1,
                 colorStops: [
                   {
                     offset: 0,
                     color: 'rgba(237,66,100, 0.3)', // 0% 处的颜色
                   },
                   {
                     offset: 1,
                     color: 'rgba(237,66,100, 0.1)', // 100% 处的颜色
                   },
                 ],
                 global: false, // 缺省为 false
               },
             },
           },
   
           {
             // 图文显示
             type: 'pictorialBar',
             data: yAxisData3.value,
             symbol: insectImage,
             symbolPosition: 'end', // 在数据结尾显示
             symbolSize: [26, 20], // 图片大小
             symbolOffset: ['1%', '-110%'], //「偏移量」
             label: {
               normal: {
                 show: true,
                 position: 'top',
                 color: '#000',
                 fontWeight: 'bold',
                 formatter: (params) => {
                   let name = params.name;
                   let data = insectDataNote.data.find((item) => name == item.thattime);
                   return data.content;
                 },
               },
             },
           },
         ],
       };
       myChart.setOption(option);
     });
   </script>
   <style lang="less" scoped>
     .top-div {
       display: flex;
       flex-direction: row;
       align-items: center;
       margin-left: 4%;
       &::before {
         content: '';
         width: 15px;
         height: 2px;
         margin-right: 2px;
   
         border-bottom: 2px solid red;
       }
   
       & > .left-span {
         flex: 1;
       }
   
       & > .right-span {
         background: #1890ff;
         padding: 2px 10px;
         color: white;
         border-radius: 5px;
       }
     }
   </style>
   

   
    
3. 病害展示效果及代码
   
    

   <!-- 病害模型 -->
   <template>
     <div>
       <div style="display: flex">
         <div class="top-div">
           <span style="width: 15px; height: 2px; margin-right: 2px; border-bottom: 2px solid #ff351d"></span>
           <span class="left-span" style="margin-right: 10px">
             空气温度上阈值 <span style="color: #ff351d; font-size: 13px">{{ eData.temperatureupper }}</span> ℃
           </span>
           <span class="left-span" style="margin-right: 10px">
             下阈值 <span style="color: #ff351d; font-size: 13px">{{ eData.temperaturelower }}</span> ℃
           </span>
         </div>
   
         <div class="top-div">
           <span style="width: 15px; height: 2px; margin-right: 2px; border-bottom: 2px solid #1890ff"></span>
           <span class="left-span" style="margin-right: 10px">
             相对湿度上阈值 <span style="color: #1890ff; font-size: 13px">{{ eData.humidityupper }}</span> %</span
           >
           <span class="left-span" style="margin-right: 10px">
             下阈值 <span style="color: #1890ff; font-size: 13px">{{ eData.humiditylower }}</span> %</span
           >
         </div>
       </div>
   
       <div id="mainChart" style="width: 100%; height: 500px; margin-top: 10px"></div>
     </div>
   </template>
   
   <script setup lang="ts">
     import { onMounted, ref } from 'vue';
     import * as echarts from 'echarts';
     import { ecahrtData } from './data';
     const eData = ref({});
     const xAxisData = ref([]);
     const yAxisData = ref([]);
     const yAxisData2 = ref([]);
     const yAxisData3 = ref([]);
     const echartTypes = ['空气温度', '相对湿度'];
     const echartTypesColor = ['#ff351d', '#1890ff'];
     onMounted(() => {
       if (ecahrtData.code == 200) {
         eData.value = ecahrtData.data;
         eData.value.graph.forEach((element) => {
           xAxisData.value.push(element.thattime);
           yAxisData.value.push(element.temperature);
           yAxisData2.value.push(element.humidity);
           if (element.diseasename) {
             yAxisData3.value.push([
               {
                 coord: [element.thattime, 0],
               },
               {
                 coord: [element.thattime, 100],
               },
             ]);
           } else {
             yAxisData3.value.push([
               {
                 coord: [element.thattime, -1],
               },
               {
                 coord: [element.thattime, -1],
               },
             ]);
           }
         });
       }
       var myChart = echarts.init(document.getElementById('mainChart'));
       var option = {
         color: echartTypesColor,
         dataZoom: [{ type: 'slider', xAxisIndex: [0], start: 90, end: 100 }],
         tooltip: {
           //鼠标移动自定义提示信息
           trigger: 'axis',
           formatter: (params) => {
             let paramStr = '<div style="max-width:200px">';
             let item = eData.value.graph[params[0].dataIndex];
             if (item.diseasename) {
               paramStr +=
                 '<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20170928%2Ff361a75ce5e04b158aff3798b428d637.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658047927&t=1429c9c7cfb74dea9ded3d011d667c7d" style="height:100px;width:200px">' +
                 '<br/>';
             }
             paramStr += params[0].name + '<br/>';
             for (var i = 0; i < params.length; i++) {
               let param = params[i];
               paramStr += `${param.marker}${param.seriesName}：${param.value} ${i == 0 ? '℃' : '%'}<br/>`;
             }
             if (item.diseasename) {
               paramStr += `${item.diseasename}<br/>`;
               paramStr += `<span style='white-space:pre-wrap'>预防措施：${item.measures}</span><br/>`;
             }
             paramStr += '</div>';
   
             return paramStr;
           },
         },
         legend: {
           //一些基本设置
           x: '4%',
           data: echartTypes,
           icon: 'circle',
           position: 'left',
         },
         xAxis: [
           //x轴线设置
           {
             type: 'category',
             splitLine: { show: false },
             boundaryGap: false,
             data: xAxisData.value,
             axisLabel: {
               formatter: (params) => {
                 return params.substring(11, 16);
               },
             },
           },
         ],
         yAxis: [
           //双y轴设置
           {
             axisTick: {
               //显示分割线
               show: true,
             },
             splitLine: { show: false },
             name: echartTypes[0] + ' ℃',
             nameLocation: 'middle',
             nameGap: 50, //坐标轴名称与轴线之间的距离
             nameTextStyle: {
               color: '#fff',
               backgroundColor: echartTypesColor[0],
               padding: 10,
               borderRadius: 5,
               fontWeight: 'normal',
             },
             type: 'value',
             axisLabel: {
               formatter: '{value} °C',
               color: echartTypesColor[0],
             },
             min: 0,
             max: 100,
             interval: 20, //间隔
             axisLine: {
               show: true,
               lineStyle: {
                 fontSize: 12,
                 color: echartTypesColor[0],
               },
             },
           },
           {
             axisTick: {
               //显示分割线
               show: true,
             },
             splitLine: { show: false },
             name: echartTypes[1] + ' ℃',
             nameLocation: 'middle',
             nameGap: 60, //坐标轴名称与轴线之间的距离
             nameTextStyle: {
               color: '#fff',
               backgroundColor: echartTypesColor[1],
               padding: 10,
               borderRadius: 5,
             },
             type: 'value',
             axisLabel: {
               formatter: '{value} %',
               color: echartTypesColor[1],
             },
             axisLine: {
               show: true,
               lineStyle: {
                 fontSize: 12,
                 color: echartTypesColor[1],
               },
             },
           },
         ],
         series: [
           {
             //空气温度相对设置
             name: echartTypes[0],
             type: 'line',
             data: yAxisData.value,
             symbol: 'circle', //标记的图形为实心圆
             symbolSize: 11, //标记的大小
             smooth: true, //面积图改成弧形状
             itemStyle: {
               normal: {
                 lineStyle: {
                   width: 3, //折线宽度
                 },
               },
             },
             markArea: {
               // 区间区域设置
               itemStyle: {
                 color: 'rgba(255, 15, 25, 0.5)',
               },
               zIndex: 10,
               label: {
                 normal: {
                   show: true,
                   color: '#000',
                   fontWeight: 'bold',
                   position: 'insideBottom',
                   formatter: '温度病发区',
                 },
               },
               data: [[{ yAxis: eData.value.temperatureupper }, { yAxis: eData.value.temperaturelower }]],
             },
   
             markLine: {
               // 区域箭头线效果
               data: [
                 {
                   name: '最大值',
                   yAxis: eData.value.temperatureupper,
                   lineStyle: {
                     width: 1.7,
                     type: 'solid',
                   },
                   label: {
                     normal: {
                       show: false,
                     },
                   },
                 },
                 {
                   name: '最小值',
                   yAxis: eData.value.temperaturelower,
                   lineStyle: {
                     width: 1.7,
                     type: 'solid',
                   },
                   label: {
                     normal: {
                       show: false,
                     },
                   },
                 },
               ],
             },
           },
           {
             // 相对湿度设置
             name: echartTypes[1],
             type: 'line',
             yAxisIndex: 1,
             symbol: 'circle', //标记的图形为实心圆
             symbolSize: 11, //标记的大小
             smooth: true, //面积图改成弧形状
             itemStyle: {
               normal: {
                 lineStyle: {
                   width: 3, //折线宽度
                 },
               },
             },
             markArea: {
               itemStyle: {
                 color: 'rgba(255, 15, 25, 0.5)',
               },
               zIndex: 20,
               label: {
                 normal: {
                   show: true,
                   color: '#000',
                   fontWeight: 'bold',
                   position: 'insideBottom',
                   formatter: '湿度病发区',
                   offset: [0, -6],
                 },
               },
               data: [[{ yAxis: eData.value.humidityupper }, { yAxis: eData.value.humiditylower }]],
             },
             markLine: {
               symbol: ['arrow', 'circle'], // 自定义箭头线的开始结束效果
               data: [
                 {
                   name: '最大值',
                   lineStyle: {
                     width: 1.7,
                     type: 'solid',
                   },
                   label: {
                     normal: {
                       show: false,
                     },
                   },
                   yAxis: eData.value.humidityupper,
                 },
                 {
                   name: '最小值',
                   lineStyle: {
                     width: 1.7,
                     type: 'solid',
                   },
                   label: {
                     normal: {
                       show: false,
                     },
                   },
                   yAxis: eData.value.humiditylower,
                 },
               ],
             },
             data: yAxisData2.value,
           },
           {
             type: 'line',
             markArea: {
               itemStyle: {
                 color: 'rgba(0, 0, 115, 0.1)',
               },
               label: {
                 normal: {
                   show: true,
                 },
               },
               data: [[{ yAxis: 0 }, { yAxis: 100 }]],
             },
             markLine: {
               name: 'aa',
               lineStyle: {
                 width: 1.7,
                 type: 'solid',
                 color: '#ff351d',
               },
               label: {
                 normal: {
                   show: true,
                   color: '#ff351d',
                   fontWeight: 'bold',
                   formatter: '纹枯病',
                 },
               },
               data: yAxisData3.value,
             },
           },
         ],
       };
       myChart.setOption(option);
     });
   </script>
   <style lang="less" scoped>
     .top-div {
       display: flex;
       flex-direction: row;
       align-items: center;
       margin-left: 4%;
     }
   </style>