echarts记录

七月_Mo

已于 2024-08-22 14:38:35 修改

阅读量344

点赞数 7

分类专栏： echarts 文章标签： echarts 前端 javascript

于 2024-08-22 14:27:51 首次发布

本文链接：https://blog.csdn.net/mozifei73/article/details/141426311

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<template>
	<div>
 		<div id="echartsEventType" />
	</div>
</template>
<script setup>
import * as echarts from 'echarts';
import { reactive, ref, onBeforeUnmount, onMounted } from 'vue';
let echarts_pie = null;
let  echarts_model = null
onMounted(() => {
  init();
});

onBeforeUnmount(() => {
  if (echarts_pie != null) {
    echarts_pie.dispose(); //销毁
  }
});
</script>

饼状图

双层有间隙的饼状图

在这里插入图片描述

const init = () => {
  if (echarts_pie != null) {
    echarts_pie.dispose(); //销毁
  }

  const chartDom = document.getElementById('echartsEventType');

  echarts_pie = echarts.init(chartDom);

  let data = [
    { value: 3048, name: '破坏林地' },
    { value: 900, name: '盗抢盗猎' },
    { value: 2048, name: '有害生物' },
    { value: 1048, name: '森林火灾' },
    { value: 6048, name: '其他' },
  ];
  let imgSrc =
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAALVJREFUOE9jZKAQMFZue7Wf8f9/BzLNWcBYtfXl/zZvcUZyDADpHWIGAJ1c/5+R0aHdS8wR5GWcXqjZ/NzhLzNz/X/Gv4kdnpIPYHzG//8ftHmLJ8LCC6sBoFgBKQAp/s/IqACMoQMgW5n//m1s8ZU8gBzYGAZUbX15n4GBsbHNW2wB1In1IBoYS43YYmkIxgK6N2BeuM/AwKBATkoEBu4BvEkYZAM0EHGqo74BMFtxeQk94wEA7lyKhqPTJy0AAAAASUVORK5CYII=';

  // 用的16进制颜色；方便与 外层透明色的修改；
  let colors = ['#8ecaff', '#46ccff', '#ffdd46', '#ff7474', '#06ffd5'];
  let legends = [];

  data.map((item, k) => {
    legends.push(item.name);
    item['itemStyle'] = { color: colors[k] };
  });

  const computedDataGap = (dataParam, isN2 = false) => {
    let newData = [];
    let gapItem = {
      value: 140, //间隙值；我这里没计算；可以做一个函数根据总数和需要的value计算添加
      name: null,
      itemStyle: {
        opacity: 0,
      },
      tooltip: {
        //隐藏这个的鼠标悬浮
        show: false,
      },
    };
    let showLen = dataParam.filter((v) => v.value && v.value > 0);

    if (showLen.length <= 1) {
      return dataParam;
    }

    dataParam.map((v) => {
      let v_ = v;

      if (isN2) {
        v_ = {
          ...v,
          itemStyle: {
            color: v.itemStyle.color + '7a',
          },
          label: {
            show: false,
          },
        };
      }

      newData.push(v_);

      if (v.value) {
        newData.push(gapItem);
      }
    });

    return newData;
  };

  let n = computedDataGap(data);
  let n2 = computedDataGap(data, true);

  let option = {
    backgroundColor: '#fff',
    tooltip: {
      trigger: 'item',
    },

    graphic: {
      elements: [
        {
          type: 'image',
          z: 6,
          style: {
            image: imgSrc,
            width: 28,
            height: 28,
            shadowBlur: 0,
            shadowColor: '#71B0E8',
            shadowOffsetX: '1',
            shadowOffsetY: '1',
          },
          left: '44%',
          top: '43%',
        },
      ],
    },
    color: colors,
    series: [
      {
        name: '',
        type: 'pie',
        radius: ['58%', '54%'],
        center: ['50%', '50%'],
        color: '#8ECAFF',
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [1],
        silent: true,
      },
      {
        name: '事件类型',
        type: 'pie',
        radius: ['75%', '65%'],
        center: ['50%', '50%'],
        // 避免label重叠
        avoidLabelOverlap: false,
        // 占位样式
        emptyCircleStyle: {
          color: 'rgba(255,255,255,0)',
        },
        label: { show: false },
        data: n,
        tooltip: { show: true },
        emphasis: {
          disabled: false,
        },
        labelLine: {
          show: false,
        },
      },
      {
        name: '事件类型',
        type: 'pie',
        radius: ['75%', '80%'],
        center: ['50%', '50%'],
        // 避免label重叠
        avoidLabelOverlap: false,
        // 占位样式
        emptyCircleStyle: {
          color: 'rgba(255,255,255,0)',
        },
        label: { show: false },
        labelLine: {
          show: false,
        },
        tooltip: { show: true },

        data: n2,
      },
    ],
  };

  echarts_pie.setOption(option);

  echarts_pie.on('legendselectchanged', function (lparam) {
    let selects = lparam.selected;
    let newDataFilter = [];

    data.filter((item) => {
      if (selects[item.name]) {
        newDataFilter.push(item);
      } else {
        let clone = {
          ...item,
          value: 0,
        };

        newDataFilter.push(clone);
      }
    });

    let nn = computedDataGap(newDataFilter);
    let nn2 = computedDataGap(newDataFilter, true);

    echarts_pie.setOption({
      series: [
        {
          data: nn,
        },
        {
          data: nn2,
        },
      ],
    });
  });

  window.addEventListener('resize', () => {
    echarts_pie.resize();
  });
};

带阴影外圈饼状图

在这里插入图片描述

const init = () => {
  if (echarts_model != null) {
    echarts_model.dispose(); //销毁
  }

  const chartDom = document.getElementById('echartsEventType');

  echarts_model = echarts.init(chartDom);

  var data_age = [
    {
      name: '地上生物量',
      value: '15',
      color: 'rgba(118, 255, 238, 1)',
    },
    {
      name: '地下生物量',
      value: '50',
      color: 'rgba(124, 255, 179, 1)',
    },
    {
      name: '枯死木',
      value: '35',
      color: 'rgba(111, 196, 249, 1)',
    },
    {
      name: '枯落物',
      value: '10',
      color: 'rgba(253, 221, 96, 1)',
    },
    {
      name: '土壤有机质',
      value: '10',
      color: 'rgba(4, 192, 145, 1)',
    },
  ];

  let option = {
    backgroundColor: '',
    color: data_age.map((item) => item.color),
    legend: [
      {
        // type: 'scroll',
        icon: 'circle',
        orient: 'horizontal',
        // x: 'left',
        left: '7%',
        right: 0,
        bottom: 0,
        // itemWidth: 10,
        padding: [0, 10, 0, 0],
        align: 'auto',
        textStyle: {
          color: '#fff',
          fontSize: '12px',
          padding: [0, 100, 0, 0],
        },
        itemGap: 3,
        // selectorItemGap: 7,
        // selector: true, //选择器
        data: data_age,
      },
    ],
    title: {
      text: '50.1',
      x: 'center',
      y: 'center',
      textStyle: {
        color: '#fff',
        rich: {
          a: {
            fontSize: 12,
            color: '#c9c9c9',
            //
          },

          c: {
            fontSize: 20,
            lineHeight: 40,
            fontWeight: 'bold',
            color: '#c9c9c9',
          },
          d: {
            fontSize: 12,

            fontWeight: 'bold',
            color: '#c9c9c9',
          },
        },
      },
    },
    series: [
      {
        name: '比例',
        type: 'pie',
        z: 2,
        radius: ['30%', '50%'],
        center: ['50%', '50%'],
        data: data_age,
        hoverAnimation: false,
        labelLine: {
          normal: {
            length: 20,
            length2: 10,
            lineStyle: {},
          },
        },
        label: {
          normal: {
            formatter: (params) => {
              return '{name|' + params.name + '}\n{value|' + params.value + '%}';
            },
            rich: {
              name: {
                color: '#fff',
                fontSize: 10,
                fontWeight: '400',
              },
              value: {
                color: '#fff',
                fontSize: 10,
                padding: [2, 0],
                fontWeight: '500',
                align: 'center',
              },
            },
          },
        },
      },
      {
        name: '背景3',
        type: 'pie',
        z: 3,
        radius: ['0', '20%'],
        center: ['50%', '50%'],
        data: [100],
        hoverAnimation: false,
        itemStyle: {
          normal: {
            color: '#27303d00',
          },
        },
        labelLine: {
          show: false,
        },
        label: {
          show: true,
        },
      },
      {
        name: '背景2',
        type: 'pie',
        z: 2,
        radius: ['20%', '30%'],
        center: ['50%', '50%'],
        data: [100],
        hoverAnimation: false,
        itemStyle: {
          normal: {
            color: 'rgba(28,65,67,.4)',
          },
        },
        labelLine: {
          show: false,
        },
        label: {
          show: false,
        },
      },
      {
        name: '背景',
        type: 'pie',
        z: 0,
        radius: ['0', '70%'],
        center: ['50%', '50%'],
        data: [100],
        hoverAnimation: false,
        itemStyle: {
          normal: {
            shadowBlur: 20,
            shadowColor: 'rgba(28,65,67,.5)',
            color: 'rgba(28,65,67,.4)',
          },
        },
        labelLine: {
          show: false,
        },
        label: {
          show: false,
        },
      },
    ],
  };

  echarts_model.setOption(option);

  window.addEventListener('resize', () => {
    echarts_model.resize();
  });
};

中间带图标饼状图

在这里插入图片描述

const echartsInitZYGL1 = () => {
  if (myChartZYGL1 != null) {
    myChartZYGL1.dispose(); //销毁
  }

  myChartZYGL1 = echarts.init(document.getElementById('echartsZYTJ'));

  let color = ['#66deff', '#09ffcf', '#ff9053'];

  const echartsData1 = {
    data: [
      {
        name: '林地',
        value: '0.36',
        area: '75.23',
        proportion: '0.36',
      },
      {
        name: '草原',
        value: '0.31',
        area: '65.23',
        proportion: '0.31',
      },
      {
        name: '湿地',
        value: '0.33',
        area: '70.23',
        proportion: '0.33',
      },
    ],
  };

  const arrName = getArrayValue(echartsData1.data, 'name');
  const objData = array2obj(echartsData1.data, 'name');

  function getArrayValue(array, key) {
    var key1 = key || 'value';
    var res = [];

    if (array) {
      array.forEach(function (t) {
        res.push(t[key1]);
      });
    }

    return res;
  }

  function array2obj(array, key) {
    var resObj = {};

    for (var i = 0; i < array.length; i++) {
      resObj[array[i][key]] = array[i];
    }

    return resObj;
  }

  let imgSrc =
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAoZJREFUWEfNVztSIzEQbWnsZIvPEXDABRbKMQEUBTgmtQPfgwDOQWBCcu9uURA4dgEX2GA4Ap/aZEbSVgu3RqORNJqlKNbp6LVeP3W/brPT6+sMvvDH/msCmzuHeyLrj2VZXPx5vMm7CJWKjSqwPhz9BoCBArV4W/7Y70IgFRsk8O374SDr9ZGA/omy2E5VoQs2SGBj9/hMcX5GBBTA7G05n6aosDYcXTKACZ1lUp6/3P8892G9BOwM8GIKlqKCjWVSTBXPLmMKeglY2eevy/k2vWcsE8quK9ZLYH04KjEgXbixezRpy4QINLHmKXNRFgduHTUIWJfp7K3AuiNQ1pf7XzPfe7rZp2AbBEJyU/BYS/4LtkbALiC34FbfblEFXzHa2NflvGcrFItbIxCSkIJRe/lakr6FCjX03RBw28f3zmivMuvfuW0Vy5DIh7CGQFv2zYKqzOUjWEPAbZ+Q4/laMh3bbElNwJKn1nohElW1C23NK4/ohOWi2H9+uFm4BDBeytgdvBtVjUAnbI0AIt0B0jZ0bD8gRdow1WCrxnutDfEp7CC4jOAgwssyUZppVih4ci01jIVZJooriutiowtJ5X7po9j1jLYBFtkHjiaS8zEDhqrkCmCRKrGuDwDEYa3kXBRTn2r6nLuU2m3W5cKUsz41HCuuxi7aLYAakAJMSvOOKZdJzvYQi/XzrohW0ox4ihG1YlKj7R19hFzvt1c8e5gZAmvDkztiTBswenyPZ+NSiqvUhZTIENbeBath5rRhbJSmyJ16xje0Gk6YsnimXug7R3Oj4YSWm+UK1NNHLglhGbAtak1a90wNrAYSrtDa5z/zR9l7fQCJKMY/jYS76Hz5v+O/KeF+v6EWKPAAAAAASUVORK5CYII=';
  let option = {
    legend: {
      show: true,
      top: '5%',
      left: '52%',
      data: arrName,
      itemWidth: 15,
      itemHeight: 10,
      width: 50,
      itemGap: 25,
      formatter: function (name) {
        return (
          '{title|' +
          name +
          '}\n{value|' +
          objData[name]?.area +
          '万亩}  {proportion|' +
          objData[name]?.proportion * 100 +
          '%}'
        );
      },
      textStyle: {
        rich: {
          title: {
            fontSize: 14,
            lineHeight: 10,
            color: '#ffffff',
          },
          value: {
            fontSize: 14,
            lineHeight: 35,
            color: '#84CCFF',
          },
          proportion: {
            fontSize: 14,
            lineHeight: 35,
            color: '#84CCFF',
          },
        },
      },
    },
    tooltip: {
      trigger: 'item',
      axisPointer: { type: 'shadow' },
      formatter: function (l) {
        return `${l.marker}${l.name} <br/>${l.value * 100}%`;
      },
    },
    graphic: {
      elements: [
        {
          type: 'image',
          z: 3,
          style: {
            image: imgSrc,
            width: 25,
            height: 25,
          },
          top: '35%',
          left: '21%',
          scale: [1.5, 1.5],
        },
      ],
    },
    series: [
      {
        type: 'pie',
        zlevel: 1,
        roseType: 'radius',
        radius: ['40%', '70%'],
        center: ['25%', '42%'],
        label: {
          normal: {
            show: false,
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        color: color,
        data: echartsData1.data,
      },
      {
        type: 'pie',
        zlevel: 2,
        silent: true,

        radius: ['35%', '36%'],
        center: ['25%', '42%'],
        label: {
          normal: {
            show: false,
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        data: _pie3(),
      },
    ],
  };

  function _pie3() {
    let dataArr = [];

    for (var i = 0; i < 100; i++) {
      if (i % 2 === 0) {
        dataArr.push({
          name: (i + 1).toString(),
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(98, 223, 245)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)',
            },
          },
        });
      } else {
        dataArr.push({
          name: (i + 1).toString(),
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)',
            },
          },
        });
      }
    }

    return dataArr;
  }

  myChartZYGL1.setOption(option);

  window.addEventListener('resize', function () {
    myChartZYGL1.resize();
  });
};

柱状图

拼接柱状图

在这里插入图片描述

const init = () => {
  if (echarts_model != null) {
    echarts_model.dispose(); //销毁
  }

  const chartDom = document.getElementById('echartsStatistics');

  echarts_model = echarts.init(chartDom);

  var data_age = [
    {
      name: '地上生物量',
      value: '15',
      color: 'rgba(118, 255, 238, 1)',
      type: 'bar',
      // barWidth: '30%',
      stack: 'Ad',
      emphasis: {
        focus: 'series',
      },
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: '地下生物量',
      value: '50',
      color: 'rgba(124, 255, 179, 1)',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series',
      },
      data: [220, 182, 191, 234, 290, 330, 310],
    },
    {
      name: '枯死木',
      value: '35',
      color: 'rgba(111, 196, 249, 1)',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series',
      },
      data: [150, 232, 201, 154, 190, 330, 410],
    },

    {
      name: '枯落物',
      value: '10',
      color: 'rgba(253, 221, 96, 1)',
      type: 'bar',
      // barWidth: '30%',
      stack: 'Search Engine',
      emphasis: {
        focus: 'series',
      },
      data: [620, 732, 701, 734, 1090, 1130, 1120],
    },
    {
      name: '土壤有机质',
      value: '10',
      color: 'rgba(4, 192, 145, 1)',
      type: 'bar',
      stack: 'Search Engine',
      emphasis: {
        focus: 'series',
      },
      data: [120, 132, 101, 134, 290, 230, 220],
    },
  ];

  let option = {
    // tooltip: {
    //   show: false,
    // },
    legend: {
      icon: 'circle',
      orient: 'horizontal',
      // x: 'left',
      left: '7%',
      right: 0,
      bottom: 0,
      // itemWidth: 10,
      padding: [0, 10, 0, 0],
      align: 'auto',
      textStyle: {
        color: '#fff',
        // fontSize: '12px',
      },
      itemGap: 3,
    },
    grid: {
      left: '3%',
      right: '4%',
      top: '10%',
      // bottom: '0',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: ['2019', '2020', '2021', '2022', '2023'],
        axisLine: {
          lineStyle: {
            color: 'rgba(133, 245, 255, .12)',
          },
        },
        axisLabel: {
          interval: 0,
          align: 'center',
          margin: 10,
          color: '#fff',
          rotate: 0,
          textStyle: {
            fontSize: 14,
          },
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(133, 245, 255, .12)',
          },
        },
        axisLabel: {
          color: '#fff',
          textStyle: {
            fontSize: 14,
          },
        },
      },
    ],
    series: data_age,
  };

  echarts_model.setOption(option);

  window.addEventListener('resize', () => {
    echarts_model.resize();
  });
};

②柱状图

在这里插入图片描述

const echartsInitFire = () => {
  if (myChartFire != null) {
    myChartFire.dispose(); //销毁
  }

  myChartFire = echarts.init(document.getElementById('echartsFire'));

  let option = {
    legend: {
      data: ['预警', '核实'],
      textStyle: {
        color: '#FEFEFE',
        fontStyle: 'normal',
        // fontFamily: '微软雅黑',
        fontSize: 16,
      },
      color: '#FEFEFE',
      itemGap: 10,
      icon: 'rect',
      right: '0',
      top: '1%',
      itemWidth: 15,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },

      formatter: function (l) {
        return `${l[0].name} <br/><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#F9924C;"></span>${l[0].seriesName} ${l[0].value}<br/><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#4477BE;"></span>${l[1].seriesName} ${l[1].value}`;
      },
    },
    color: ['brown', 'blue'],
    grid: {
      left: '5%',
      right: '0',
      bottom: '2%',
      containLabel: true,
    },
    textStyle: {
      color: '#FEFEFE',
      fontStyle: 'normal',
      fontFamily: '微软雅黑',
      fontSize: 16,
    },
    xAxis: [
      {
        type: 'category',
        // data: echartsFireData['火情概括统计表'].timer,
        data: ['2024-8-4', '2024-8-5', '2024-8-6', '2024-8-7', '2024-8-8'],
        axisPointer: {
          type: 'shadow',
        },
        axisLine: {
          lineStyle: {
            color: '#4477BE',
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        // max: echartsFireData['火情概括统计表'].max,
        max: 100,
        interval: 20,

        splitLine: {
          lineStyle: {
            color: 'rgba(68, 119, 190,0.3)', // 分隔线颜色。
          },
        },
        // axisLine: {
        //   show: true,
        //   lineStyle: {
        //     color: '#4477BE', // 分隔线颜色。
        //   },
        // },
      },
    ],
    series: [
      {
        name: '核实',
        type: 'bar',
        barWidth: 18,
        // data: echartsFireData['火情概括统计表'].dataHS,
        data: [5, 100, 25, 12, 11, 11],
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: '#51433C',
              },

              {
                offset: 1,
                color: '#F9924C',
              },
            ]),
            borderWidth: 1,
            borderColor: '#EDA467',
          },
        },
      },
      {
        name: '预警',
        type: 'bar',
        barWidth: 18,
        // data: echartsFireData['火情概括统计表'].dataYJ,
        data: [5, 50, 75, 112, 41, 11],
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: '#1B3462',
              },
              {
                offset: 1,
                color: '#51A6FD',
              },
            ]),
            borderWidth: 1,
            borderColor: '#65C3FF',
          },
        },
      },
    ],
  };

  myChartFire.setOption(option);

  window.addEventListener('resize', function () {
    myChartFire.resize();
  });
};

③立体柱状图

在这里插入图片描述

const echartsInitZYGL3 = () => {
  if (myChartZYGL3 != null) {
    myChartZYGL3.dispose(); //销毁
  }

  myChartZYGL3 = echarts.init(document.getElementById('echartsGYLMJ'));

  let option = {
    grid: {
      top: '15%',
      right: '10%',
      bottom: '10%',
      left: '3%',
      containLabel: true,
    },
    title: {
      text: '万亩',
      textStyle: {
        fontFamily: 'Source Han Sans CN',
        fontSize: 16,
        color: '#89D4FF',
      },
      padding: [3, 0, 0, 3],
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },

      formatter: function (l) {
        return `${l[0].name}年 <br/>${l[0].value}万亩`;
      },
    },
    xAxis: {
      data: ['2021', '2022', '2023', '2024'],
      //坐标轴
      axisLine: {
        lineStyle: {
          color: '#9FC3FF',
        },
      },
      //坐标值标注
      axisLabel: {
        show: true,
        textStyle: {
          color: '#FEFEFE',
          fontSize: 16,
        },
      },
    },
    yAxis: {
      //坐标轴
      axisLine: {
        show: false,
      },
      //坐标值标注
      axisLabel: {
        show: true,
        textStyle: {
          color: '#FEFEFE',
          fontSize: 16,
        },
      },
      //分格线
      splitLine: {
        lineStyle: {
          color: 'rgba(68, 119, 190,0.3)', // 分隔线颜色。
        },
      },
    },
    series: [
      {
        name: 'a',
        tooltip: {
          show: false,
        },
        type: 'bar',
        barWidth: 17,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 0,
                  color: '#3287d4', // 0% 处的颜色
                },
                {
                  offset: 0.6,
                  color: '#6daeed', // 60% 处的颜色
                },
                {
                  offset: 1,
                  color: '#529fe7', // 100% 处的颜色
                },
              ],
              false,
            ),
          },
        },
        data: [20, 25, 30, 35, 40],
        barGap: 0,
      },
      {
        type: 'bar',
        barWidth: 7,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 0,
                  color: '#529fe7', // 0% 处的颜色
                },
                {
                  offset: 0.6,
                  color: '#6daeed', // 60% 处的颜色
                },
                {
                  offset: 1,
                  color: '#3287d4', // 100% 处的颜色
                },
              ],
              false,
            ),
          },
        },
        barGap: 0,
        data: [20, 25, 30, 35, 40],
      },
      {
        name: 'b',
        tooltip: {
          show: false,
        },
        type: 'pictorialBar',
        itemStyle: {
          borderWidth: 1,
          borderColor: '#6daeed',
          color: '#3287d4',
        },
        symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
        symbolSize: ['27', '4'],
        symbolOffset: ['0', '-2'],
        symbolPosition: 'end',
        data: [20, 25, 30, 35, 40],
        z: 3,
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChartZYGL3.setOption(option);

  autoToolTip(myChartZYGL3, option, {
    // 轮播间隔时间 默认2s
    interval: 2000,
    // 是否循环轮播所有序列
    loopSeries: false,
    // 第1个被轮播的序列下标
    seriesIndex: 1,
  });

  window.addEventListener('resize', function () {
    myChartZYGL3.resize();
  });
};

折线图

①折线图

在这里插入图片描述

const init = () => {
  if (echarts_model != null) {
    echarts_model.dispose(); //销毁
  }

  const chartDom = document.getElementById('echartsYc');

  echarts_model = echarts.init(chartDom);

  let obj = {
    xData: ['2018', '2019', '2020', '2021'],
    lineData: [
      {
        name: '地上生物量',
        data: [2000, 1900, 2000, 2300, 2500, 2900, 2700],
        color: 'rgba(118, 255, 238, 1)',
      },
      {
        name: '地下生物量',
        data: [400, 490, 700, 1400, 2000, 2200, 2600],
        color: 'rgba(124, 255, 179, 1)',
      },
      {
        name: '枯死木',
        data: [1700, 1700, 1600, 1700, 1500, 1700, 2200],
        color: 'rgba(111, 196, 249, 1)',
      },
      {
        name: '枯落物',
        data: [1500, 1600, 1500, 1600, 2000, 2300, 2000],
        color: 'rgba(253, 221, 96, 1)',
      },
      {
        name: '土壤有机质',
        data: [1000, 1200, 1500, 1800, 2200, 2000, 2500],
        color: 'rgba(4, 192, 145, 1)',
      },
    ],
  };

  let serData = [];

  obj.lineData.forEach((item) => {
    serData.push({
      name: item.name,
      type: 'line',
      showSymbol: true,
      symbolSize: 8,
      symbol: 'circle',
      lineStyle: {
        color: item.color,
      },
      itemStyle: {
        color: '#fff',
        borderColor: item.color,
        borderWidth: 2,
      },
      data: item.data,
    });
  });

  let option = {
    backgroundColor: '',

    legend: {
      // icon: 'circle',
      orient: 'horizontal',
      // x: 'left',
      left: '7%',
      right: 0,
      bottom: 0,
      // itemWidth: 10,
      padding: [0, 10, 0, 0],
      align: 'auto',
      textStyle: {
        color: '#fff',
        // fontSize: '12px',
      },
      itemGap: 3,
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      backgroundColor: '#0a2b45', // 设置背景颜色
      textStyle: {
        // color: '#333',
        color: '#fff',
        fontSize: 14,
      },
      borderColor: 'rgba(255, 255, 255, .16)',
      axisPointer: {
        lineStyle: {
          color: 'rgba(28, 124, 196)',
        },
      },

      formatter: (params) => {
        let arr = [...params];
        let str = '';

        arr.forEach((item, index) => {
          str +=
            '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
            obj.lineData[index].color +
            ';"></span>' +
            item.seriesName +
            '  ' +
            item.data +
            'Tg<br />';
        });
        str = arr[0].name + '<br />' + str;

        return str;
      },
    },

    grid: {
      top: '15%',
      left: '8%',
      right: '2%',
      bottom: '18%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        axisLine: {
          lineStyle: {
            color: 'rgba(133, 245, 255, .12)',
          },
        },
        axisLabel: {
          interval: 0,
          align: 'center',
          margin: 10,
          color: '#fff',
          rotate: 0,
          textStyle: {
            fontSize: 14,
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        boundaryGap: true,
        data: obj.xData,
      },
    ],

    yAxis: [
      {
        type: 'value',
        name: '',
        nameTextStyle: {
          //y轴上方单位的颜色
          color: 'rgb(139, 143, 147)',
        },
        // splitNumber: 6,
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(133, 245, 255, .12)',
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(221, 228, 241,.3)',
            // type: "dashed",
          },
        },
        axisLabel: {
          color: '#fff',
          textStyle: {
            fontSize: 14,
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: serData,
  };

  echarts_model.setOption(option);

  window.addEventListener('resize', () => {
    echarts_model.resize();
  });
};

②折线图

在这里插入图片描述

const handleInitChartLine = () => {
  if (myChartLine) {
    myChartLine.dispose()
  }

  const timeList = []
  const valueList = []

  const chartDom = document.getElementById('line-echart')

  myChartLine = markRaw(echarts.init(chartDom))
  const colorList = ['#3EB79C', '#FFAD5D', '#3F9DEE', '#838CDF', '#FB6B88']
  let option = null

  option = {
    backgroundColor: '#fff',

    legend: {
      icon: 'emptyCircle',
      left: '25%',
      top: '2%',
      itemWidth: 6,
      itemGap: 20,
      textStyle: {
        color: '#556677',
      },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        label: {
          show: true,
          backgroundColor: '#fff',
          color: '#556677',
          borderColor: 'rgba(0,0,0,0)',
          shadowColor: 'rgba(0,0,0,0)',
          shadowOffsetY: 0,
        },
        lineStyle: {
          width: 0,
        },
      },
      backgroundColor: '#fff',
      textStyle: {
        color: '#5c6c7c',
      },
      padding: [10, 10],
      extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)',
    },
    grid: {
      top: '25%',
      left: '4%',
      right: '3%',
      bottom: '8%',
    },
    xAxis: [
      {
        type: 'category',
        data: [
          '2028-08-01',
          '2028-08-02',
          '2028-08-03',
          '2028-08-04',
          '2028-08-05',
          '2028-08-06',
          '2028-08-07',
          '2028-08-08',
          '2028-08-09',
          '2028-08-10',
          '2028-08-11',
          '2028-08-12',
          '2028-08-13',
          '2028-08-14',
          '2028-08-15',
          '2028-08-16',
          '2028-08-17',
          '2028-08-18',
          '2028-08-19',
          '2028-08-20',
          '2028-08-21',
          '2028-08-22',
          '2028-08-23',
        ],
        axisLine: {
          lineStyle: {
            color: '#DCE2E8',
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 'auto',
          textStyle: {
            color: '#556677',
          },
          // 默认x轴字体大小
          fontSize: 12,
          // margin:文字到x轴的距离
          margin: 15,
        },
        axisPointer: {
          label: {
            // padding: [11, 5, 7],
            padding: [0, 0, 0, 0],

            margin: 15,
            // 移入时的字体大小
            fontSize: 12,
            backgroundColor: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#fff', // 0% 处的颜色
                },
                {
                  offset: 0.86,

                  color: '#fff', // 0% 处的颜色
                },
                {
                  offset: 0.86,
                  color: '#33c0cd', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#33c0cd', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        boundaryGap: false,
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '个',
        nameTextStyle: {
          color: '#666666',
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#DCE2E8',
          },
        },
        axisLabel: {
          textStyle: {
            color: '#556677',
          },
        },
        splitLine: {
          show: true,
        },
      },
      {
        type: 'value',
        position: 'right',
        axisTick: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: '#556677',
          },
          formatter: '{value}',
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#DCE2E8',
          },
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: '人员事件',
        type: 'line',
        data: [
          0, 100, 200, 300, 400, 500, 0, 700, 0, 900, 1000, 0, 0, 1300, 1400, 1, 0, 1700, 0, 1900, 2000, 2100, 0, 2300,
          2400, 2500, 0, 2700, 0, 2900, 0, 0, 3200, 3300, 0, 10, 3600, 3700, 3800, 0, 4000, 4100, 4200, 43,
        ],
        symbolSize: 1,
        symbol: 'emptyCircle',
        smooth: true,
        yAxisIndex: 0,
        showSymbol: false,
        lineStyle: {
          width: 2,
        },
        itemStyle: {
          normal: {
            color: colorList[0],
            borderColor: colorList[0],
          },
        },
      },
      {
        name: '车辆事件',
        type: 'line',
        data: [
          0, 0, 200, 0, 400, 500, 0, 700, 0, 900, 1000, 0, 0, 1300, 1400, 1, 0, 1700, 0, 1900, 0, 2100, 0, 2300, 2400,
          0, 0, 0, 0, 0, 0, 0, 3200, 0, 0, 10, 0, 3700, 800, 0, 0, 0, 4200, 43,
        ],
        symbolSize: 1,
        symbol: 'emptyCircle',
        smooth: true,
        yAxisIndex: 0,
        showSymbol: false,
        lineStyle: {
          width: 2,
        },
        itemStyle: {
          normal: {
            color: colorList[1],
            borderColor: colorList[1],
          },
        },
      },
      {
        name: '非法搭建',
        type: 'line',
        data: [
          0, 10, 70, 300, 400, 500, 0, 700, 0, 0, 0, 0, 0, 1300, 1400, 1, 0, 1700, 0, 1900, 30, 2100, 0, 2300, 2400, 0,
          0, 0, 0, 2900, 0, 0, 3200, 30, 0, 10, 3600, 300, 300, 0, 400, 100, 4200, 43,
        ],
        symbolSize: 1,
        symbol: 'emptyCircle',
        smooth: true,
        yAxisIndex: 0,
        showSymbol: false,
        lineStyle: {
          width: 2,
        },
        itemStyle: {
          normal: {
            color: colorList[2],
            borderColor: colorList[2],
          },
        },
      },
      {
        name: '鱼排事件',
        type: 'line',
        data: [
          0, 10, 2100, 300, 400, 0, 0, 700, 0, 900, 10, 0, 0, 1300, 1400, 1, 0, 700, 0, 900, 2000, 2100, 0, 2300, 2400,
          2500, 0, 2700, 0, 500, 0, 0, 3200, 3300, 0, 10, 600, 3700, 800, 0, 0, 100, 4200, 43,
        ],
        symbolSize: 1,
        symbol: 'emptyCircle',
        smooth: true,
        yAxisIndex: 0,
        showSymbol: false,
        lineStyle: {
          width: 2,
        },
        itemStyle: {
          normal: {
            color: colorList[3],
            borderColor: colorList[3],
          },
        },
      },
      {
        name: '船只事件',
        type: 'line',
        data: [
          0, 0, 40, 300, 0, 500, 0, 700, 0, 900, 1000, 0, 0, 0, 1400, 1, 0, 1700, 0, 0, 2000, 2100, 0, 2300, 2400, 2500,
          0, 2700, 0, 0, 0, 0, 3200, 3300, 0, 10, 3600, 3700, 3800, 0, 0, 0, 4200, 43,
        ],
        symbolSize: 1,
        symbol: 'emptyCircle',
        smooth: true,
        yAxisIndex: 0,
        showSymbol: false,
        lineStyle: {
          width: 2,
        },
        itemStyle: {
          normal: {
            color: colorList[4],
            borderColor: colorList[4],
          },
        },
      },
    ],
  }

  option && myChartLine.setOption(option)

  window.addEventListener('resize', function () {
    myChartLine.resize()
  })
}

3D地图

在这里插入图片描述

var splitList = [
  {
    start: 1,
    end: 1,
    label: '环县',
    color: '#9de8cd',
  },
  {
    start: 2,
    end: 2,
    label: '镇原县',
    color: '#2fd59a',
  },
  {
    start: 3,
    end: 3,
    label: '西峰区',
    color: '#b6eed8',
  },
  {
    start: 4,
    end: 4,
    label: '宁县',
    color: '#a0e9cd',
  },
  {
    start: 5,
    end: 5,
    label: '正宁县',
    color: '#73e0b8',
  },
  {
    start: 6,
    end: 6,
    label: '合水县',
    color: '#5ad7ac',
  },
  {
    start: 7,
    end: 7,
    label: '庆城县',
    color: '#1ebd91',
  },
  {
    start: 8,
    end: 8,
    label: '华池县',
    color: '#71e0b8',
  },
];

var geoCoordMap = {
  环县: [107.308754, 36.569322],
  镇原县: [107.195706, 35.677806],
  西峰区: [107.638824, 35.733713],
  宁县: [107.921182, 35.50201],
  正宁县: [108.361068, 35.490642],
  合水县: [108.019865, 35.819005],
  庆城县: [107.885664, 36.013504],
  华池县: [107.986288, 36.457304],
};

var customerBatteryCityData = [
  { name: '环县', value: '99111' },
  { name: '镇原县', value: '99' },
  { name: '西峰区', value: '99' },
  { name: '宁县', value: '99' },
  { name: '正宁县', value: '99' },
  { name: '合水县', value: '99' },
  { name: '庆城县', value: '99' },
  { name: '华池县', value: '99' },
];
const regions = splitList.map((item) => {
  return {
    name: item.label,
    itemStyle: {
      areaColor: item.color,
      color: 'red',
    },

    emphasis: {
      itemStyle: {
        show: false,
        // areaColor: '#ffd34e', // 高亮时候地图显示的颜色
        borderWidth: 1, // 高亮时的边框宽度
      },
    },
    selected: false,
    select: {
      label: {
        show: false,
      },
      itemStyle: {
        areaColor: '#ffd34e', // 高亮时候地图显示的颜色
        borderWidth: 1, // 高亮时的边框宽度
      },
    },
  };
});

// 动态计算柱形图的高度（定一个max）
function lineMaxHeight() {
  // const maxValue = Math.max(...customerBatteryCityData.map((item) => item.value));

  return 0;
}

// 柱状体的主干
function lineData() {
  return customerBatteryCityData.map((item) => {
    return {
      coords: [geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + 1 * lineMaxHeight()]],
    };
  });
}

// 柱状体的顶部
function scatterData() {
  return customerBatteryCityData.map((item) => {
    return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + 1 * lineMaxHeight(), item];
  });
}

// 柱状体的底部
function scatterData2() {
  return customerBatteryCityData.map((item) => {
    return {
      name: item.name,
      value: geoCoordMap[item.name],
    };
  });
}

const mapChart = () => {
  if (map_model != null) {
    map_model.dispose(); //销毁
  }

  const chartDom = document.getElementById('Chart_Map_Model');

  map_model = echarts.init(chartDom);
  echarts.registerMap('qingyang', JSON_LAYER); //边界GeoJson

  var mapFeatures = JSON_LAYER.features;

  mapFeatures.forEach(function (v) {
    // 地区名称
    var name = v.properties.name;

    // 地区经纬度
    geoCoordMap[name] = v.properties.center;
  });

  let option = {
    geo: [
      {
        layoutCenter: ['50%', '42%'], //位置
        layoutSize: '160%', //大小
        aspectScale: 1.4,
        show: true,
        map: 'qingyang',
        roam: false,
        zoom: 0.65,

        label: {
          show: false,
          emphasis: {
            // 对应的鼠标悬浮效果
            show: false,
            color: '#fff',
            fontSize: 16,
          },
        },

        itemStyle: {
          normal: {
            borderColor: 'rgba(168, 237, 215)',
            shadowColor: 'rgba(85, 168, 121)',
            borderWidth: 1,
            shadowOffsetY: 10,
            shadowBlur: 20,
          },
          emphasis: {
            areaColor: 'rgba(0,254,233,0.6)',
            // borderWidth: 0
          },
        },
        regions: regions,
      },
      {
        type: 'map',
        map: 'qingyang',
        zlevel: -1,
        layoutSize: '160%', //大小
        aspectScale: 1.4,
        zoom: 0.65,
        layoutCenter: ['50%', '43%'],
        roam: false,
        silent: true,
        itemStyle: {
          normal: {
            borderWidth: 0,
            // borderColor: 'rgba(58,149,253,0.6)',
            shadowColor: 'rgba(85, 168, 121,0.4)',
            shadowOffsetY: 5,
            shadowBlur: 15,
            areaColor: 'transpercent',
          },
        },
      },
      {
        type: 'map',
        map: 'qingyang',
        zlevel: -2,
        layoutSize: '160%', //大小
        aspectScale: 1.4,
        zoom: 0.65,
        layoutCenter: ['50%', '44%'],
        roam: false,
        silent: true,
        itemStyle: {
          normal: {
            borderWidth: 0,
            shadowColor: 'rgba(85, 168, 121,0.9)',
            shadowOffsetY: 5,
            shadowBlur: 15,
            areaColor: 'transpercent',
          },
        },
      },
      {
        type: 'map',
        map: 'qingyang',
        zlevel: -3,
        layoutSize: '160%', //大小
        aspectScale: 1.4,
        zoom: 0.65,
        layoutCenter: ['50%', '45%'],
        roam: false,
        silent: true,
        itemStyle: {
          normal: {
            borderWidth: 0,
            shadowColor: 'rgba(41, 79, 56,0.5)',
            shadowOffsetY: 5,
            shadowBlur: 15,
            areaColor: 'rgba(87, 175, 124,0.4)',
          },
        },
      },
      {
        type: 'map',
        map: 'qingyang',
        zlevel: -4,
        layoutSize: '160%', //大小
        aspectScale: 1.4,
        zoom: 0.65,
        layoutCenter: ['50%', '46%'],
        roam: false,
        silent: true,
        itemStyle: {
          normal: {
            borderWidth: 1,
            shadowColor: 'rgba(41, 79, 56,0.5)',
            shadowOffsetY: 15,
            shadowBlur: 5,
            areaColor: 'rgba(87, 175, 124,0.4)',
          },
        },
      },
    ],

    series: [
      //柱状体的主干
      {
        type: 'lines',
        zlevel: 15,
        effect: {
          show: false,
          symbolSize: 5, // 图标大小
        },
        lineStyle: {
          width: 6, // 尾迹线条宽度
          // color: 'rgb(19, 105, 77, .6)',
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: 'rgb(184, 244, 222)',
              },
              {
                offset: 0.5,
                color: 'rgba(19, 105, 77,0.6)',
              },
              {
                offset: 1,
                color: 'rgb(255, 255, 255)',
              },
            ],
            false,
          ),
          opacity: 1, // 尾迹线条透明度
          curveness: 0, // 尾迹线条曲直度
        },
        label: {
          show: 0,
          position: 'end',
          formatter: '245',
        },
        silent: true,
        data: lineData(),
      },
      // 柱状体的顶部
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        geoIndex: 0,
        zlevel: 10,
        label: {
          normal: {
            show: true,
            formatter: function (params) {
              // var name = params.data[2].name;
              var value = params.data[2].value;
              // var text = `{tline|${name}}:{fline|${value}}`
              var text = `{tline|${checkedType.value} :}{fline|${value}}`;

              return text;
            },
            rich: {
              fline: {
                fontSize: 14,
                fontWeight: 400,
                fontFamily: 'PangMenZhengDao',
                padding: [0, 5, 1, 5],
                color: 'rgb(205, 249, 233)',
              },
              tline: {
                padding: [2, 2, 2, 50],
                color: '#9AF0D6',
                fontSize: 14,
                fontFamily: 'Source Han Sans CN',
              },
            },
          },
          emphasis: {
            show: true,
          },
        },
        itemStyle: {
          color: '#00FFF6',
          opacity: 1,
        },
        symbol: 'image://' + `${checkedType.value == '碳储量' ? img1.value : img2.value}`,
        symbolSize: [150, 42],
        symbolOffset: [0, -15],
        z: 999,
        data: scatterData(),
      },
      // 柱状体的底部
      {
        geoIndex: 0,
        zlevel: 10,
        type: 'effectScatter',
        coordinateSystem: 'geo',
        rippleEffect: {
          scale: 0,
          brushType: 'stroke',
        },
        showEffectOn: 'render',

        label: {
          normal: {
            formatter: '{b}',
            position: 'bottom',
            color: '#fff',
            fontSize: 16, //文字大小
            fontFamily: 'Source Han Sans CN',
            fontWeight: 500,
            backgroundColor: 'rgba(0,0,0,0)', //透明度0清空文字背景
            distance: 10,
            padding: [0, 5, 1, 5],
            show: true,
          },
        },
        symbol: 'circle',
        symbolSize: [10, 10],
        itemStyle: {
          color: 'rgba(0,0,0,0)',
        },
        data: scatterData2(),
      },
    ],
  };

  map_model.setOption(option);

  window.addEventListener('resize', () => {
    map_model.resize();
  });

  // 在某个时刻动态更新区域颜色
  function updateRegionColor() {
    var updatedOption = {
      geo: {
        regions,
      },
    };

    // 使用 setOption 更新配置
    map_model.setOption(updatedOption);
  }

  updateRegionColor();

  // map_model.on('click', function (params) {
  //   //通过城市名称找到对应城市编码

  //   var now = regions;
  //   var city = params.name;

  //   for (let i in now) {
  //     if (now[i].name == city) {
  //       now[i].selected = true;
  //     } else {
  //       now[i].selected = false;
  //     }
  //   }

  //   option.geo.regions = now;

  //   map_model.clear();
  //   map_model.setOption(option);
  // });
};