ECharts常用常用图表样式

ECharts 饼图 默认高亮

    var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        color: ["#3BCED0", "#37D0B8"],
        legend: {
          show: false, // 图例是否显示
          orient: "horizontal",
          left: "center",
          bottom: "0",
          icon: "circle",
        },
        series: [
          {
            type: "pie",
            data: [
              {
                value: 60
                // name: "直接访问"
              },
              {
                value: 40
                // name: "联盟广告"
              }
            ],
            radius: "80%",
            // 鼠标移上去的item不会凸出了
            hoverAnimation: false,
            labelLine: {
              normal: {
                length: 45,
                length2: 45,
                show: false // 隐藏所有指示线
              }
            }
          }
        ]
      };

      myChart.setOption(option);
      myChart.dispatchAction({
        type: "highlight",
        dataIndex: 1
      });

      // 监听鼠标滑入事件
      myChart.on("mouseover", e => {
        // 鼠标滑入取消整个系列高亮
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: e.seriesIndex
        });
        // 然后高亮鼠标悬停的那块
        myChart.dispatchAction({
          type: "highlight",
          dataIndex: e.dataIndex
        });
      });

      // 监听鼠标滑出事件
      myChart.on("mouseout", e => {
        // 鼠标滑出取消整个系列所有高亮
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: e.seriesIndex
        });
        // 然后高亮鼠标最后悬停的那块
        myChart.dispatchAction({
          type: "highlight",
          dataIndex: e.dataIndex
        });
      });

      option && myChart.setOption(option);

Echarts 环形图样式大全

legend: {
          // top: '15%',
          // bottom:'0',
          x: 'right',
          y: 'center',
          orient: 'vertical',
          align: 'left', //这个是可以左右调整的
          itemWidth: 9,
          itemHeight: 9,
          data: [{
            name: '体育',
            icon: 'circle'
          }, {
            name: '劳育',
            icon: 'circle'
          }, {
            name: '美育',
            icon: 'circle'
          }],
        },
        series: [{
          hoverAnimation: false, //鼠标悬浮是否有区域弹出动画，false:无  true:有
          name: 'Access From',
          type: 'pie',
          radius: ['55%', '85%'], // 这个属性修改圆环宽度
          center: ['35%', '50%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {},
          tooltip: {
            show: false //显示提示框
          },
          labelLine: {
            show: false
          },
          data: [{
              value: 1048,
              name: '体育'
            },
            {
              value: 735,
              name: '劳育'
            },
            {
              value: 580,
              name: '美育'
            }
          ]
        }],

ECharts 折线图样式大全

       var option = {
 
        backgroundColor: '#FFF0F5',
 
        title: {
          text: '折线图',
          subtext: '模拟数据',
          x: 'center'
        },
 
        legend: {
          // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
          orient: 'horizontal',
          // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
          x: 'left',
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
          y: 'top',
          data: ['预期','实际','假设']
        },
 
        //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
        grid: {
          x: 0, //距离左边
          x2: 0, //距离右边
          y: 0, //距离上边
          y2: 0, //距离下边
          left: 0,
          right: 0,
          top: 0,
          bottom: 0
            containLabel: true
        },
 
        // 提示框
        tooltip: {
          trigger: 'axis'
        },
 
        //工具框，可以选择
        toolbox: {
            feature: {
                saveAsImage: {} //下载工具
            }
        },
 
        xAxis: {
          name: '周几',
          type: 'category',
          axisLine: {
            lineStyle: {
              // 设置x轴颜色
              color: '#912CEE'
            }
          },
          // 设置X轴数据旋转倾斜
          axisLabel: {
            rotate: 30, // 旋转角度
            interval: 0  //设置X轴数据间隔几个显示一个，为0表示都显示
            },
          // boundaryGap值为false的时候，折线第一个点在y轴上
          boundaryGap: false,
          axisLine: {
            show: false, //隐藏x轴
          },
          axisTick: {
            show: false, //隐藏刻度线
          },
          axisLabel: {
            show: false, //隐藏刻度值
          },
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
 
        yAxis: {
          name: '数值',
          type: 'value',
          min:0, // 设置y轴刻度的最小值
          max:1800,  // 设置y轴刻度的最大值
          splitNumber:9,  // 设置y轴刻度间隔个数
           // 设置折线上圆点大小
          symbolSize: 8,
          axisTick: {
            show: false, //隐藏刻度线
          },
          axisLine: {
            show: false, //隐藏y轴
          },
          axisLabel: {
            show: false, //隐藏刻度值
          },
          splitLine: {
            show: false, // 隐藏背景
          }
          axisLine: {
            lineStyle: {
              // 设置y轴颜色
              color: '#87CEFA',
               //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                        //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        //       {
                        //         offset: 0,
                        //         color: "rgba(240, 147, 43,.7)"
                        //       },
                        //       {
                        //         offset: 0.34,
                        //         color: "rgba(255, 190, 118,.5)"
                        //       },
                        //       {
                        //         offset: 1,
                        //         color: "rgba(255, 190, 118,0)"
                        //       }
                        //     ])
            }
          },
        },
 
        series: [
          {
            name: '预期',
            data: [820, 932, 301, 1434, 1290, 1330, 1320],
            type: 'line',
            // 设置小圆点消失
            // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
            symbol: 'none',
            // 设置折线弧度，取值：0-1之间
            smooth: 0.5,
          },
 
          {
            name: '实际',
            data: [620, 732, 941, 834, 1690, 1030, 920],
            type: 'line',
            // 设置折线上圆点大小
            symbolSize:8,
            itemStyle:{
              normal:{
                // 拐点上显示数值
                label : {
                show: true
                },
                borderColor:'red',  // 拐点边框颜色
                lineStyle:{                 
                  width:5,  // 设置线宽
                  type:'dotted'  //'dotted'虚线 'solid'实线
                }
              }
            }
          },
 
          {
            name: '假设',
            data: [120, 232, 541, 134, 290, 130, 120],
            type: 'line',
            // 设置折线上圆点大小
            symbolSize:10,
            // 设置拐点为实心圆
            symbol:'circle',            
            itemStyle: {
              normal: {
                // 拐点上显示数值
                label : {
                  show: true
                },
                lineStyle:{
                  // 使用rgba设置折线透明度为0，可以视觉上隐藏折线
                  color: 'rgba(0,0,0,0)'
                }
              }
            }
          }
        ],
        
        color: ['#00EE00', '#FF9F7F','#FFD700']
      };

ECharts 柱状图样式大全

        // 柱状图
        bar() {
            let that = this;
            var chartDom = document.getElementById("main2");
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow"
                    }
                },
                legend: {
                    top: 20,
                    textStyle: {
                        color: "#fff"
                    },
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true
                },
                xAxis: {
                    type: "value",
                    boundaryGap: [0, 0.01],
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "#fff"
                        }
                    }
                },
                yAxis: {
                    type: "category",
                    data: ["公共管家", "生活管家", "教学管家"],
                    axisLine: {
                        lineStyle: {
                            color: "#fff"
                        }
                    }
                },
                series: [
                    {
                        barWidth: 12,
                        name: "巡检数据",
                        type: "bar",
                        color: "#5087EC",
                        data: that.xj,
                        barGap: "20%",
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: "right", //在上方显示
                                    textStyle: {
                                        //数值样式
                                        color: "#5087EC",
                                        fontSize: 12
                                    }
                                }
                            }
                        }
                    },
                    {
                        barWidth: 12,
                        name: "报修数据",
                        type: "bar",
                        color: "#68BBC4",
                        barGap: "20%",

                        data: that.bx,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, //开启数值显示
                                    position: "right", //在上方显示
                                    textStyle: {
                                        //数值样式
                                        color: "#68BBC4",
                                        fontSize: 12
                                    }
                                }
                            }
                        }
                    }
                ]
            };

            // 自适应
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });

            option && myChart.setOption(option);
        },

柱状图（3D）

<!-- 驾驶舱 -->
<template>
  <div class="relative" id="aaa" style="background-color:black">
    <el-button class="absolute right-0 top-0" size="small"
      @click="toggleFullScreen">{{fullBol?'取消全屏':'切换全屏'}}</el-button>
    <div ref="mainRef" style="width:30%;height:500px"></div>
  </div>
</template>
    
<script lang="ts" setup>
import { ref, reactive, toRefs, onMounted } from 'vue';
import * as echarts from 'echarts';

const myChart = ref<any>(null); // 用于保存 ECharts 实例

const fullBol = ref<boolean>(false);
const toggleFullScreen = () => {
  const element = document.getElementById('aaa');
  if (element) {
    if (!document.fullscreenElement) {
      fullBol.value = true;
      element.requestFullscreen();
    } else {
      if (document.exitFullscreen) {
        fullBol.value = false;
        document.exitFullscreen();
      }
    }
  }
};

// 监听全屏变化事件
const handleFullScreenChange = () => {
    console.log(4545);
    
  if (myChart.value) {
    myChart.value.resize(); // 调整图表大小
  }
};

// 使用ref来引用DOM元素
const mainRef = ref(null);
const x = ['宿舍环境', '支援服务', '荣誉表彰', '社会实践', '实践技能'];
const barWidth = 12;
const sideData = [220, 182, 191, 234, 290, 330];
const sideData1 = [100, 110, 120, 134, 190, 230];
const summedData = ref<Array<number>>(
  sideData.map((value, index) => value + sideData1[index])
);

const echartInit = () => {
   myChart.value = echarts.init(mainRef.value);
  // 指定图表的配置项和数据
  var option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      formatter: function (params) {
        let tooltipText = `<strong>${params[0].name}</strong><br/>`;

        // 获取每个数据项

        const sideDataValue = params.find(
          (item) => item.seriesName === '已完成'
        )?.value;
        const sideData1Value = params.find(
          (item) => item.seriesName === '待完成'
        )?.value;
        // 计算总和
        const totalValue = sideDataValue + sideData1Value;

        // 显示每个系列的数值
        params.forEach((item) => {
          tooltipText += `${item.seriesName} : ${item.value}<br/>`;
        });

        // 显示总和
        tooltipText += `总和 : ${totalValue}`;

        return tooltipText;
      },
    },
    legend: {
      show: true, // 确保图例显示
      data: ['已完成', '待完成'], // 数据系列名称
      textStyle: {
        color: '#fff', // 图例文字颜色
      },
      orient: 'horizontal', // 图例的排列方式：'horizontal' 或 'vertical'
      top: 'top', // 图例位置，可选值 'top', 'bottom', 'left', 'right'
      formatter: function (name) {
        if (name === '已完成') {
          return '全部'; // 只替换 '已完成' 为 '全部'
        }
        return name; // 其他保持不变
      },
    },
    grid: {
      top: '30px',
      left: '5px',
      right: '0px',
      bottom: '0px',
      containLabel: true,
    },
    toolbox: {
      show: true,
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        splitLine: {
          show: false,
        },
        data: x,
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff', // X轴文字颜色
          },
        },
      },
    ],
    yAxis: [
      {
        nameTextStyle: {
          color: '#fff',
        },
        type: 'value',
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff', // Y轴文字颜色
          },
        },
      },
    ],
    series: [
      {
        type: 'bar',
        stack: 'left', // 设置堆叠的组名
        name: '已完成',
        barWidth: barWidth,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 0,
                  color: '#005cb4ff', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#005cb4', // 100% 处的颜色
                },
              ],
              false
            ),
          },
        },
        barGap: 0,  // 柱条间距分为两种，一种是不同系列在同一类目下的距离 barGap，另一种是类目与类目的距离 barCategoryGap。
        data: sideData,
      },
      {
        type: 'bar',
        stack: 'left', // 设置堆叠的组名
        name: '待完成',
        barWidth: barWidth,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 0,
                  color: '#00d4daff', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#00d4da', // 100% 处的颜色
                },
              ],
              false
            ),
          },
        },
        barGap: 0,
        data: sideData1,
      },

      {
        type: 'bar',
        stack: 'right', // 设置堆叠的组名
        name: '已完成',
        barWidth: barWidth,
        tooltip: {
          show: false,
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 0,
                  color: 'rgba(1, 6, 38, 0)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#007df5', // 100% 处的颜色
                },
              ],
              false
            ),
          },
        },
        data: sideData,
        label: {
          show: false,
          position: 'top',
          textStyle: {
            color: 'white',
            fontSize: 10,
          },
        },
      },
      {
        type: 'bar',
        stack: 'right', // 设置堆叠的组名
        name: '待完成',
        barWidth: barWidth,
        tooltip: {
          show: false,
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 0,
                  color: '#00d4daff', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#08a3a8', // 100% 处的颜色
                },
              ],
              false
            ),
          },
        },
        data: sideData1,
        label: {
          show: false,
          position: 'top',
          textStyle: {
            color: 'white',
            fontSize: 10,
          },
        },
      },
      {
        tooltip: {
          show: false,
        },
        name: '待完成',
        stack: 'top', // 设置堆叠的组名
        type: 'pictorialBar',
        itemStyle: {
          borderWidth: 1,
          borderColor: '#00f5fd',
          color: '#00f5fd', // 控制顶部方形的颜色
        },
        symbol: 'path://M 0,0 l 90,0 l -60,60 l -90,0 z',
        symbolSize: [barWidth * 2, '8'], // 第一个值控制顶部方形大小
        symbolOffset: ['0', '-4'], // 控制顶部放行 左右和上下
        symbolRotate: -18,
        symbolPosition: 'end',
        data: summedData.value,
        z: 3,
      },
      {
        tooltip: {
          show: false,
        },
        name: '已完成',
        stack: 'top', // 设置堆叠的组名
        type: 'pictorialBar',
        itemStyle: {
          borderWidth: 1,
          borderColor: '#00f5fd',
          color: '#00f5fd', // 控制顶部方形的颜色
        },
        symbol: 'diamond', // 有三类图形可选，一种是 ECharts 内置形状，第二种是图片，第三种是 SVG 的路径
        symbolSize: [barWidth * 2, '8'], // 第一个值控制顶部方形大小
        symbolOffset: ['0', '-4'], // 控制顶部放行 左右和上下
        symbolRotate: 0,
        symbolPosition: 'end',
        data: sideData,
        z: 3,
      },
    ],
  };

  myChart.value.setOption(option, true);

  myChart.value.on('legendselectchanged', function (event) {
    const { name, selected } = event;
    if (selected['已完成'] && selected['待完成']) {
      summedData.value = sideData.map(
        (value, index) => value + sideData1[index]
      );
    } else if (selected['已完成']) {
      summedData.value = sideData;
    } else if (selected['待完成']) {
      summedData.value = sideData1;
    }
    myChart.value.setOption(option, true);
  });
};

//挂载
onMounted(() => {
  echartInit();
   document.addEventListener('fullscreenchange', handleFullScreenChange);
});
onBeforeUnmount(() => {
  document.removeEventListener('fullscreenchange', handleFullScreenChange);
  if (myChart.value) {
    myChart.value.dispose(); // 销毁 ECharts 实例
  }
});
</script>