echarts 数据可视化大屏（包含环形进度图、折线图、胶囊柱状图）

echarts 环形进度图

(可以直接复制代码到echarts修改配置项 ！！！)

let piedata = 25;  
option =  {
  series: [
            {
              type: "pie",
              radius: ["72", "80"], //环形图的内外半径（大小）
              center: ["50%", "50%"], //整个图形的位置
              avoidLabelOverlap: false,     
              label: {
              show: false,
              position: "center",
              },
              labelLine: {
                show: false,
              },
         	  data: [
                {
                  value:piedata, //数据 按比例显示的
                  selected: false,
                  itemStyle: {
                    color: "#fc5328", //图形颜色#fc5328
                    borderWidth: 2,
                    borderRadius: 25,
                   },
                   label: {
                    // 是显示标签
                    show: true,
                    position: "center",
                    fontSize: 28,
                    // 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
                    formatter: "{d}%",
                   },
                },
                {
                  value: 100-piedata,  //数据 按比例显示的
                  name: "",
                  itemStyle: {
                    color: "#fae6e1",
                  },
                  label: {
                    show: false,
                  },
               },
          ],
        },
      ],
    }

echarts折线图

(可以直接复制代码到echarts修改配置项 ！！！)

let lineOneData= {
        date: ["2022-1-1", "2022-1-2", "2022-1-3", "2022-1-4", "2022-1-5"],
        arr: [40233, 54243, 45466, 65446, 72000],
        lineColor: "#4288fc",
        bgColorOne: "rgba(66, 136, 252,0.8)",
        bgColorTwo: "rgba(169, 199, 250,0.1)",
      };
option =  {
          tooltip: {
            trigger: "axis",
          },

          grid: {
            //整个图的左右上下间距
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            //y轴只显示四个值
            boundaryGap: false, //折线居中改为最左到最右
            // data: ["2022-1-1", "2022-1-2", "2022-1-3", "2022-1-4", "2022-1-5"], //数据(数组)
            data:lineOneData.date, //数据(数组)
            axisLine: {
              show: false, //是否显示x轴
              onZero: true,
            },
            axisTick: {
              show: false, //是否显示刻度线

            },
         
            axisLabel: {
              // fontWeight: 700, //文字样式
              interval: 50, // 只显示最大和最小坐标(比数组个数大)
              showMinLabel: true, // 显示最小刻度标签
              showMaxLabel: true, // 显示最大刻度标签
              // 单独设置标签样式formatter
            formatter: function (value, index) {
                let valueone = "";
                let valuetwo = "";
                if (index == 0) {
                  // 横坐标第一个日期
                  valueone = value;
                  return `{a|${valueone}}`;
                } else {
                  
                  valuetwo = value;
                  return `{b|${valuetwo}}`;
                }
              },
              rich: {
                a: {
                  padding: [0, 0, 0, 50], //将第一个日期位置对其横坐标开头
                },
                b: {
                  padding: [0, 70, 0, 0],
                },
              },
            },
          },
          yAxis: {
            type: "value",
            splitNumber: 4, //y轴只显示四个值
            axisLabel: {
              formatter: "{value}", //鼠标移入的提示信息框
            },
            axisLine: {
              onZero: true,
              lineStyle: {
              },
            },
            
          },
          series: [
            {
              name: "用户数",
              type: "line",
              // data:[40233, 54243, 45466, 65446, 72000], //数据(数组)
              data:lineOneData.arr, //数据(数组)
              lineStyle: {
                // color: "#4288fc", //折线的颜色
                color: lineOneData.lineColor, //折线的颜色
              },
              symbol: "none", //不显示折点
              areaStyle: {
                //渐变颜色 （这里后面我改了this.$echarts）
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    // color:"rgba(66, 136, 252,0.8)",
                    color:lineOneData.bgColorOne,
                  },
                  {
                    offset: 1,
                    // color:"rgba(66, 136, 252,0.1)",
                    color:lineOneData.bgColorTwo,
                  },
                ]),
              },
            },
          ],
        }

echarts 带阴影的胶囊柱状图

(可以直接复制代码到echarts修改配置项 ！！！)

let bardata = {
  name:['北京','杭州','上海','广州'],
  data:[23433,54544,64557,75458]
}
option =    {
          // 柱状图的颜色
          color: ["#ffdb5c", "#9fe6b8", "#67e0e3", "#32c5e9", "#37a2da"],
          tooltip: {
            show: false,
           
          },
          grid: {
            left: "20%",
            right: "20%",
            bottom: "15%",
            top: "15%",
          },
          xAxis: {
            type: "value",
            boundaryGap: [0, 0.01],
            show: true,//是否显示label x轴标签数值
          },
          yAxis: {
            axisLine: {
              // 坐标轴 轴线
              show: false, // 是否显示
            },
            axisTick: {
              //是否显示坐标断线
              show: false,
            },
            show:true, //是否显示label y轴标签文字
            axisLabel: {
              color: "#000", //显示文字
              fontSize: 14, //数据文字大小
              fontWeight: 500,
            },
     
            type: "category",
            data: bardata.name,
          },
          series: [
            {
              
              type: "bar",
              data: bardata.data,
              colorBy: "data", //按数据变色
              barWidth: "28%", //图形宽度
              showBackground: true,
              backgroundStyle: { 
                shadowColor: "#333", //阴影颜色
                shadowBlur: 3,
                borderColor: "#ccc", //背景边框颜色
                color: "#fff", //背景颜色
                // opacity: 0.1,
                borderType: "solid",
                borderWidth: 1,
                borderRadius: [20, 20, 20, 20],
              },
              barCategoryGap: "40%", // 柱形的间距
              itemStyle: {
                // 图形的形状
                borderRadius: [20, 20, 20, 20],
              },
              label: {
                show: true,
                position: "outside", //数据显示位置，默认显示在中间
                color: "#000", //数据文字颜色
                fontSize: 14, //数据文字大小
                fontWeight: 500,
                formatter: function (p) { 
                  let value = "";
                  if (p.value > 0) {
                    value = p.value;
                    if (value > 999) {
                      // 数值加千分号
                      let parts = value.toString().split(".");
                      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                      value = parts.join(".");
                    }
                  }
                  return value;
                },
                
              },
            },
          ],
        }

echarts 带提示框的饼状图

显示 tooltip，选中图例，鼠标移入显示提示框。

option = {
  title: {
    text: '饼图程序调用高亮示例',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

let currentIndex = -1;

setInterval(function() {
  var dataLen = option.series[0].data.length;
  // 取消之前高亮的图形
  myChart.dispatchAction({
    type: 'downplay',
    seriesIndex: 0,
    dataIndex: currentIndex
  });
  currentIndex = (currentIndex + 1) % dataLen;
  // 高亮当前图形
  myChart.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: currentIndex
  });
  // 显示 tooltip
  myChart.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: currentIndex
  });
}, 1000);

配置项

 tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },

a表示 series 里面item.name ，b表示data.name ，c表示data.value ，d表示图形占比