echars 图表配置 大数据 -新

已于 2022-07-13 11:51:48 修改
阅读量186 收藏
点赞数
分类专栏： echarts 文章标签： echarts javascript
于 2020-10-16 10:16:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42374676/article/details/109111248
版权

滚动:https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/09-echart.html
案例:https://blog.csdn.net/qq_34235864/article/details/120878688?utm_medium=distribute.pc_feed_v2.none-task-blog-personrec_tag-9.pc_personrecdepth_1-utm_source=distribute.pc_feed_v2.none-task-blog-personrec_tag-9.pc_personrec
echarts 不动的数据格式:https://blog.csdn.net/qq_37235616/article/details/112298075
echarts 点击处理:https://www.cnblogs.com/liangsf/p/11592283.html
title: 标题组件，包含主标题和副标题。
legend:图例组件。
grid: 直角坐标系内绘图网格 及傍边距离
xAxis: x轴
yAxis: y轴
polar: 极坐标系
radiusAxis:极坐标系x
angleAxis:极坐标角度
radar: 雷达图
dataZoom 组件 用于区域缩放
tooltip: 提示框组件的通用介绍

参考:https://github.com/dabeng/OrgChart

树状图

option = {
  series: [{
    type: "tree",
    data: [{
      name: "root",
      children: [{
        name: "Child A",
        children: [{
          name: "Leaf C"
        }, {
          name: "Leaf D"
        }, {
          name: "Leaf E"
        }, {
          name: "Leaf F"
        }]
      }, {
        name: "Child B",
        children: [{
          name: "Leaf G"
        }, {
          name: "Leaf H"
        }]
      }, {
        name: "Child D"
      }, {
        name: "Child F",
        children: [{
          name: "Leaf J"
        }, {
          name: "Leaf K"
        }]
      }]
    }],
    label: {
      position: "inside",
      show: true,
      backgroundColor: "rgba(150, 116, 116, 1)",
      padding: [5, 5, 5, 5]
    },
    edgeShape: "polyline",
    layout: "orthogonal",
    orient: "LR",
    symbol: "none",
    symbolOffset: [0, 0],
    expandAndCollapse: false,
    itemStyle: {
      color: "rgba(227, 23, 23, 1)",
      borderColor: "rgba(118, 12, 12, 1)",
      borderWidth: 5.5,
      borderType: "dotted",
      borderCap: "square"
    },
    tooltip: {
      borderColor: "rgba(218, 45, 45, 1)"
    }
  }]
}

树状图

option = {
  series: [{
    type: "tree",
    data: [{
      name: "root",
      children: [{
        name: "Child A",
        children: [{
          name: "Leaf C"
        }, {
          name: "Leaf D"
        }, {
          name: "Leaf E"
        }, {
          name: "Leaf F"
        }]
      }, {
        name: "Child B",
        children: [{
          name: "Leaf G"
        }, {
          name: "Leaf H"
        }]
      }, {
        name: "Child D"
      }, {
        name: "Child F",
        children: [{
          name: "Leaf J"
        }, {
          name: "Leaf K"
        }]
      }]
    }],
    label: {
      position: "right"
    },
    edgeShape: "polyline"
  }]
}

南北极地图配置

option = {
    angleAxis: {
        max: 2,
        startAngle: 30,
        splitLine: {
            show: true
        }
    },
    radiusAxis: {
        type: 'category',
        data: ['v', 'w', 'x', 'y', 'z'],
        z: 10
    },
    polar: {
    },
    series: [{
        type: 'bar',
        data: [4, 3, 2, 1, 0.55],
        coordinateSystem: 'polar',
        name: 'Without Round Cap',
        color: 'rgba(200, 0, 0, 0.5)',
        itemStyle: {
            borderColor: 'red',
            borderWidth: 1
        }
    }, {
        type: 'bar',
        data: [4, 3, 2, 1, 0],
        coordinateSystem: 'polar',
        name: 'With Round Cap',
        roundCap: true,
        color: 'rgba(0, 200, 0, 0.5)',
        itemStyle: {
            borderColor: 'green',
            borderWidth: 1
        }
    }],
    legend: {
        show: true,
        data: ['Without Round Cap', 'With Round Cap'],
          selectedMode: false,// legend 点击联动效果
    }
};

扇形配置

export let pie = {
  color: ["#F05A49", "#2B91E1", "#29AB91"],
  // title: {
  //   show: true,
  //   text: "120%",
  //   x: "center",
  //   y: "center",
  //   textStyle: {
  //     color: "#FFFEFE",
  //     fontSize: 12,
  //   },
  // },
  series: [{
      type: "pie",
      radius: "100%",
      center: ["50%", "50%"],
      data: [
        {
          name: "33%\n偏高",
          value: 1,
        },
        {
          name: "33%\n偏低",
          value: 1,
        },
        {
          name: "33%\n正常",
          value: 1,
        },
      ],
       animation: false,
      label: {
        position: "inside",
        alignTo: "none",
        bleedMargin: 5,
      },
    },
  ],
};

圆环

let pie0 = {
  series: [
    {
      name: "访问来源",
      type: "pie",
      radius: ["70%", "90%"],
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: "center",
      },
      data: [
        {
          value: 10,
          name: "10%",
          itemStyle: { color: "#29AB91" },
        },
        {
          value: 90,
          name: "",
          itemStyle: { color: "#EEEEEE" }
        },
      ],
    },
  ],
};

圆环配置

// 运动心率
var colorList = ["#2B91E2", "#F15A4A", "#FFB415"];
option = {
  tooltip: {
    show: false,
    trigger: "item",
  },
  series: [
    {
      type: "pie",
      // center:["50%","36%"],
      radius: ["46%", "56%"],
      clockwise: true,
      avoidLabelOverlap: true,
      hoverOffset: 0,
      itemStyle: {
        normal: {
          color: function (params) {
            return colorList[params.dataIndex];
          },
        },
      },
      label: {
        show: true,
        fontSize: 10,
        // formatter: "{d}%(46分)\n 心率",
        formatter: function (params) {
          // console.log(params, "===========params");
          return params.percent + "%(46分)\n" + params.name;
        },
      },
      labelLine: {
        normal: {
          length: 10,
          length2: 10,
          lineStyle: {
            width: 1,
          },
        },
      },
      data: [
        {
          name: "低于心直率",
          value: 1.45,
        },
        {
          name: "持平心直率",
          value: 2.93,
        },
        {
          name: "高于心直率",
          value: 3.15,
        },
      ],
    },
  ],
};

柱状图 叠加
在这里插入图片描述


option  = {
  color: ["#F94B4B", "#FFA9A9", "#E6E6E6"],
  legend: {
    orient: "horizontal",
    left: "center",
    bottom: "10",
    itemHeight: 10,
    itemWidth: 10,

    data: [
      {
        name: "日常消耗",
        icon: "circle",
        textStyle: {
          color: "#666",
        },
      },
      {
        name: "运动消耗",
        icon: "circle",
        textStyle: {
          color: "#666",
        },
      },
      {
        name: "每日建议量",
        icon: "circle",
        textStyle: {
          color: "#666",
        },
      },
    ],
    textStyle: {
      color: "rgba(0,0,0,.3)",
      fontSize: 10,
      fontWeight: 300,
      padding: [0, 2],
    },
    tooltip: {
      show: true,
    },
  },
  // 内容距离边框
  grid: {
    top: "2%", // 等价于 y: '16%'
    left: "1%",
    right: "6%",
    bottom: "20%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    boundaryGap: true,
    offset: 10,
    data: ["07/10", "07/11", "07/12", "07/13", "07/14", "07/15", "07/16"],

    axisLine: {
      lineStyle: {
        color: "#ccc",
      },
    },
    //  改变x轴字体颜色和大小
    axisLabel: {
      interval: 0,
      textStyle: {
        color: "#999999",
        fontSize: "10",
      },
    },
    //网格样式
    splitLine: {
      show: false,
      interval: "auto",
      lineStyle: {
        color: ["#ccc"],
        width: 1,
        type: "solid",
      },
    },
    axisTick: {
      show: false,
    },
  },
  yAxis: [
    {
      type: "value",
      // name: "mmHg",
      splitArea: {
        show: false,
      },

      minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
      // y轴颜色
      axisLine: {
        lineStyle: {
          color: "#ccc",
        },
      },
      //  改变y轴字体颜色和大小
      axisLabel: {
        formatter: "{value}", //  给y轴添加单位
        textStyle: {
          color: "#ccc",
          fontSize: "12",
        },
      },
      // y轴线
      splitLine: {
        lineStyle: {
          color: "#ccc",
        },
      },
      axisTick: {
        show: false,
      },
    },
    // y轴
    // {
    //   name: "降雨量(mm)",
    //   nameLocation: "start",
    //   max: 5,
    //   type: "value",
    //   inverse: true,
    //   axisLine: {
    //     lineStyle: {
    //       color: "#ccc",
    //     },
    //   },
    // },
  ],
  series: [
    {
      name: "日常消耗",
      type: "bar",
      stack: "广告",
      barWidth: 10,
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: "运动消耗",
      type: "bar",
      stack: "广告",
      data: [220, 182, 191, 234, 290, 330, 310],
    },

    {
      name: "每日建议量",
      type: "bar",
      barWidth: 10,
      barGap: 0,
      stack: "广告1",
      data: [150, 232, 201, 154, 190, 330, 410],
      // 点击亮色
      emphasis: {
        itemStyle: {
          // 高亮时点的颜色。
          color: "#E6E6E6",
        },
      },
    },
  ],
};

横向柱状图


option  = sportdistance_option = {
  legend: {
    bottom: 20,
    itemWidth: 10,
    itemHeight: 10,
    icon: "circle",
    data: ["每日运动里程推荐", "运动里程"],
    selectedMode: false,
  },
  grid: {
    left: "1%",
    right: "6%",
    bottom: "20%",
    top: "3%",
    containLabel: true,
  },
  xAxis: {
    type: "value",
    boundaryGap: [0, 0],
    axisTick: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        color: "#ccc",
      },
    },
  },
  yAxis: {
    type: "category",
    data: ["07/10", "07/11", "07/12", "07/13", "07/14", "07/15", "07/16"],
    axisTick: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        color: "#ccc",
      },
    },
  },
  series: [
    {
      name: "运动里程",
      type: "bar",
      data: [1, 3, 3.1, 2.6, 3.5, 5, 4],
      itemStyle: {
        barBorderRadius: [0, 24, 24, 0],
        color: "#FF7545",
      },
    },
    {
      name: "每日运动里程推荐",
      type: "bar",
      barGap: 0,
      data: [2.25, 2.25, 2.25, 2.25, 2.25, 2.25, 2.25],
      itemStyle: {
        barBorderRadius: [0, 24, 24, 0],
        color: "#DDDDDD",
      },
      emphasis: {
        itemStyle: {
          // 高亮时点的颜色。
          color: "#DDDDDD",
        },
      },
    },
  ],
};

双环图表

heatanalyse_option = {
  title: [
    {
      text: "建议",
      x: "44%",
      y: 0,
      textAlign: "center",
      textStyle: {
        align: "center",
        color: "#6BB2EB",
        fontSize: 12,
        fontWeight: "100",
      },
    },
    {
      text: "实际",
      x: "44%",
      y: 20,
      textAlign: "center",
      textStyle: {
        align: "center",
        color: "#F05A49",
        fontSize: 12,
        fontWeight: "100",
      },
    },
    {
      text: "营养素分析",
      left: "50%",
      top: "42%",
      textAlign: "center",
      textStyle: {
        fontSize: "14",
        color: "#B6B6B6",
        textAlign: "center",
        fontWeight: "100",
      },
    },
  ],
  series: [
    {
      name: "访问来源",
      type: "pie",
      startAngle: 85,
      radius: ["82%", "92%"],
      center: ["50%", "50%"],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: "center",
      },
      emphasis: {
        label: {
          show: true,
          fontSize: "30",
          fontWeight: "bold",
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        {
          value: Math.round(0.1 * 75),
          itemStyle: {
            normal: {
              color: "#F05A49",
            },
          },
        },

        {
          value: 75 - Math.round(0.2 * 75),
          name: " ",
          itemStyle: {
            normal: {
              color: "#2B91E1", //未完成的圆环的颜色
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },
        },
        {
          value: 75 - Math.round(0.7 * 75),
          name: " ",
          itemStyle: {
            normal: {
              color: "#29AB91", //未完成的圆环的颜色
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },
        },
        {
          value: 25,
          name: " ",
          itemStyle: {
            normal: {
              color: "transparent", //未完成的圆环的颜色
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },
        },
      ],
    },
    {
      name: "访问来源1",
      type: "pie",
      startAngle: 85,
      radius: ["62%", "72%"],
      center: ["50%", "50%"],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: "center",
      },
      emphasis: {
        label: {
          show: true,
          fontSize: "30",
          fontWeight: "bold",
        },
      },
      labelLine: {
        show: false,
      },

      data: [
        {
          value: Math.round(0.1 * 75),
          itemStyle: {
            normal: {
              color: "#F05A49",
            },
          },
        },

        {
          value: 75 - Math.round(0.2 * 75),
          name: " ",
          itemStyle: {
            normal: {
              color: "#2B91E1", //未完成的圆环的颜色
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },
        },
        {
          value: 75 - Math.round(0.7 * 75),
          name: " ",
          itemStyle: {
            normal: {
              color: "#29AB91", //未完成的圆环的颜色
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },
        },
        {
          value: 25,
          name: " ",
          itemStyle: {
            normal: {
              color: "transparent", //未完成的圆环的颜色
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },
        },
      ],
    },
  ],
};

网格点图

cholesterol_option = {
  cwl: "mmol/L",
  tooltip: {
    trigger: "item",
    formatter: function (param) {
      console.log(param, "param===");
      return `<span>${(param.value[1] * 1).toFixed(2)}${cholesterol_option.cwl}<br>${
        param.seriesName
      }<span>`;
    },
  },
  legend: {
    orient: "horizontal",
    left: "center",
    bottom: "10",
    itemHeight: 6,
    itemWidth: 6,
    data: [
      {
        name: "严重\n偏低",
        icon: "circle",
        textStyle: {
          color: "#666",
        },
      },
      {
        name: "正常",
        icon: "circle",
        textStyle: {
          color: "#666",
        },
      },
      {
        name: "偏高",
        icon: "circle",
        textStyle: {
          color: "#666",
        },
      },
      {
        name: "严重\n偏高",
        icon: "circle",
        textStyle: {
          color: "#666",
        },
      },
    ],
    textStyle: {
      color: "rgba(0,0,0,.3)",
      fontSize: 10,
      fontWeight: 300,
      padding: [0, 1],
    },
    selectedMode: false,
  },
  // 内容距离边框
  grid: {
    top: "2%", // 等价于 y: '16%'
    left: "1%",
    right: "4%",
    bottom: "20%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    offset: 0,
    data: ["", "07/10", "07/11", "07/12", "07/13", "07/14", "07/15", "07/16"],

    axisLine: {
      lineStyle: {
        color: "#ccc",
      },
    },
    //  改变x轴字体颜色和大小
    axisLabel: {
      interval: 0,
      textStyle: {
        color: "#999999",
        fontSize: "10",
      },
    },
    //网格样式
    splitLine: {
      show: true,
      interval: "auto",
      lineStyle: {
        color: ["#ccc"],
        width: 1,
        type: "solid",
      },
    },
    axisTick: {
      show: false,
    },
  },
  yAxis: {
    type: "value",
    // name: "mmHg",

    minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
    // y轴颜色
    axisLine: {
      lineStyle: {
        color: "#ccc",
      },
    },
    //  改变y轴字体颜色和大小
    axisLabel: {
      formatter: "{value}", //  给y轴添加单位
      textStyle: {
        color: "#999999",
        fontSize: "12",
      },
    },
    // y轴线
    splitLine: {
      lineStyle: {
        color: "#ccc",
      },
    },
    axisTick: {
      show: false,
    },
  },
  series: [
    {
      name: "偏低",
      type: "scatter",
      data: [[1, 20]],
      symbol: "circle",
      symbolSize: 10,
      showAllSymbol: true,
      lineStyle: {
        //设置折线色颜色
        color: "#0BBFC6",
      },
      itemStyle: {
        //设置折线折点的颜色,
        normal: {
          color: "#0BBFC6",
          // label: { show: true }
        },
      },
      // emphasis: {
      //   label: {
      //     show: true,
      //     formatter: function (param) {
      //       return param.data[3];
      //     },
      //     position: "bottom",
      //   },
      // },
    },
    {
      name: "正常",
      type: "scatter",
      data: [[5, 60]],
      symbol: "circle",
      symbolSize: 10,
      showAllSymbol: true,
      lineStyle: {
        color: "#91D143",
      },
      itemStyle: {
        //设置折线折点的颜色,
        normal: {
          color: "#91D143",
          // label: { show: true }
        },
      },
      // emphasis: {
      //   label: {
      //     show: true,
      //     formatter: function (param) {
      //       return param.data[3];
      //     },
      //     position: "bottom",
      //   },
      // },
    },
    {
      name: "偏高",
      type: "scatter",
      data: [],
      symbol: "circle",
      symbolSize: 10,
      showAllSymbol: true,
      lineStyle: {
        color: "#FFD700",
      },
      itemStyle: {
        //设置折线折点的颜色,
        normal: {
          color: "#FFD700",
          // label: { show: true }
        },
      },
      // emphasis: {
      //   label: {
      //     show: true,
      //     formatter: function (param) {
      //       return param.data[3];
      //     },
      //     position: "bottom",
      //   },
      // },
    },
    {
      name: "严重\n偏高",
      type: "scatter",
      data: [],
      symbol: "circle",
      symbolSize: 10,
      showAllSymbol: true,
      lineStyle: {
        color: "#EC6700",
      },
      itemStyle: {
        //设置折线折点的颜色,
        normal: {
          color: "#EC6700",
          // label: { show: true }
        },
      },
      // emphasis: {
      //   label: {
      //     show: true,
      //     formatter: function (param) {
      //       return param.data[3];
      //     },
      //     position: "bottom",
      //   },
      // },
    },
  ],
};

连线竖线状图
在这里插入图片描述

 pressure_option = {
  cwl: "mmHg",
  tooltip: {
    trigger: "item",
    formatter: function (param) {
      console.log(param, "param===");
      return `<span>${(param.value[1] * 1).toFixed(0)}${pressure_option.cwl}<br>${
        param.seriesName
      }<span>`;
    },
  },
  legend: {
    orient: "horizontal",
    left: "center",
    bottom: "10",
    itemHeight: 6,
    itemWidth: 6,
    data: [
      {
        name: "严重\n过低",
        icon: "circle",
        textStyle: {
          color: "#666",
        },
      },
      {
        name: "低\n血压",
        icon: "circle",
        textStyle: {
          color: "#666",
        },
      },
      {
        name: "正常\n血压",
        icon: "circle",
        textStyle: {
          color: "#666",
        },
      },
      {
        name: "正常\n高值",
        icon: "circle",
        textStyle: {
          color: "#666",
        },
      },
      {
        name: "一级\n血压",
        icon: "circle",
        textStyle: {
          color: "#666",
        },
      },
      {
        name: "二级\n血压",
        icon: "circle",
        textStyle: {
          color: "#666",
        },
      },
      {
        name: "三级\n血压",
        icon: "circle",
        textStyle: {
          color: "#666",
        },
      },
    ],
    textStyle: {
      color: "rgba(0,0,0,.3)",
      fontSize: 10,
      fontWeight: 300,
      padding: [0, 1],
    },
    selectedMode: false,
  },
  // 内容距离边框
  grid: {
    top: "2%", // 等价于 y: '16%'
    left: "1%",
    right: "2%",
    bottom: "20%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    offset: 0,
    data: ["", "07/10", "07/11", "07/12", "07/13", "07/14", "07/15", "07/16"],

    axisLine: {
      lineStyle: {
        color: "#ccc",
      },
    },
    //  改变x轴字体颜色和大小
    axisLabel: {
      interval: 0,
      textStyle: {
        color: "#999999",
        fontSize: "10",
      },
    },
    //网格样式
    splitLine: {
      show: true,
      interval: "auto",
      lineStyle: {
        color: ["#ccc"],
        width: 1,
        type: "solid",
      },
    },
    axisTick: {
      show: false,
    },
  },
  yAxis: {
    type: "value",
    // name: "mmHg",

    minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
    // y轴颜色
    axisLine: {
      lineStyle: {
        color: "#ccc",
      },
    },
    //  改变y轴字体颜色和大小
    axisLabel: {
      formatter: "{value}", //  给y轴添加单位
      textStyle: {
        color: "#999999",
        fontSize: "12",
      },
    },
    // y轴线
    splitLine: {
      lineStyle: {
        color: "#ccc",
      },
    },
    axisTick: {
      show: false,
    },
  },
  series: [
    {
      name: "严重\n过低",
      type: "line",
      data: [
        [1, 20],
        [1, 60],
      ],
      symbol: "circle",
      symbolSize: 10,
      showAllSymbol: true,
      lineStyle: {
        //设置折线色颜色
        color: "#63CFFA",
      },
      itemStyle: {
        //设置折线折点的颜色,
        normal: {
          color: "#63CFFA",
          // label: { show: true }
        },
      },
    },
    {
      name: "低\n血压",
      type: "line",
      data: [
        [5, 60],
        [5, 80],
      ],
      symbol: "circle",
      symbolSize: 10,
      showAllSymbol: true,
      lineStyle: {
        color: "#02C4C3",
      },
      itemStyle: {
        //设置折线折点的颜色,
        normal: {
          color: "#02C4C3",
          // label: { show: true }
        },
      },
    },
    {
      name: "正常\n血压",
      type: "line",
      data: [],
      symbol: "circle",
      symbolSize: 10,
      showAllSymbol: true,
      lineStyle: {
        color: "#91D049",
      },
      itemStyle: {
        //设置折线折点的颜色,
        normal: {
          color: "#91D049",
          // label: { show: true }
        },
      },
    },
    {
      name: "正常\n高值",
      type: "line",
      data: [],
      symbol: "circle",
      symbolSize: 10,
      showAllSymbol: true,
      lineStyle: {
        color: "#FFD900",
      },
      itemStyle: {
        //设置折线折点的颜色,
        normal: {
          color: "#FFD900",
          // label: { show: true }
        },
      },
    },
    {
      name: "一级\n血压",
      type: "line",
      data: [],
      symbol: "circle",
      symbolSize: 10,
      showAllSymbol: true,
      lineStyle: {
        color: "#FF9615",
      },
      itemStyle: {
        //设置折线折点的颜色,
        normal: {
          color: "#FF9615",
          // label: { show: true }
        },
      },
    },
    {
      name: "二级\n血压",
      type: "line",
      data: [],
      symbol: "circle",
      symbolSize: 10,
      showAllSymbol: true,
      lineStyle: {
        color: "#A30F04",
      },
      itemStyle: {
        //设置折线折点的颜色,
        normal: {
          color: "#A30F04",
          // label: { show: true }
        },
      },
    },
    {
      name: "三级\n血压",
      type: "line",
      data: [],
      symbol: "circle",
      symbolSize: 10,
      showAllSymbol: true,
      lineStyle: {
        color: "#A30F04",
      },
      itemStyle: {
        //设置折线折点的颜色,
        normal: {
          color: "#A30F04",
          // label: { show: true }
        },
      },
    },
  ],
};

花纹 竖线图


option  =glu_option = {
  cwl: "mmol/L",
  tooltip: {
    borderColor: "#f00",
    trigger: "item",
    formatter: function (param) {
      console.log(param, '============== // name: "mmHg",');
      return `<span>${(param.value[1] * 1).toFixed(1)}${glu_option.cwl}<br>${
        param.seriesName
      }<span>`;
    },
  },
  legend: {
    orient: "horizontal",
    left: "center",
    bottom: "10",
    itemHeight: 6,
    itemWidth: 6,
    data: [
      {
        name: "严重\n过低",
        icon: "circle",
        textStyle: {
          color: "#666",
        },
      },
      {
        name: "血糖\n偏低",
        icon: "circle",
        textStyle: {
          color: "#666",
        },
      },
      {
        name: "血糖\n正常",
        icon: "circle",
        textStyle: {
          color: "#666",
        },
      },
      {
        name: "轻度\n偏高",
        icon: "circle",
        textStyle: {
          color: "#666",
        },
      },
      {
        name: "血糖\n偏高",
        icon: "circle",
        textStyle: {
          color: "#666",
        },
      },
      {
        name: "严重\n过高",
        icon: "circle",
        textStyle: {
          color: "#666",
        },
      },
    ],
    textStyle: {
      color: "rgba(0,0,0,.3)",
      fontSize: 10,
      fontWeight: 300,
      padding: [0, 1],
    },
    selectedMode: false,
  },
  // 内容距离边框
  grid: {
    top: "2%", // 等价于 y: '16%'
    left: "1%",
    right: "4%",
    bottom: "20%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    offset: 0,
    data: ["", "07/10", "07/11", "07/12", "07/13", "07/14", "07/15", "07/16"],

    axisLine: {
      lineStyle: {
        color: "#ccc",
      },
    },
    //  改变x轴字体颜色和大小
    axisLabel: {
      interval: 0,
      textStyle: {
        color: "#999999",
        fontSize: "10",
      },
    },
    //网格样式
    splitLine: {
      show: false,
      interval: "auto",
      lineStyle: {
        color: ["#ccc"],
        width: 1,
        type: "solid",
      },
    },
    axisTick: {
      show: false,
    },
  },
  yAxis: [
    {
      type: "value",
      // name: "mmHg",
      splitArea: {
        show: true,
      },

      minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
      // y轴颜色
      axisLine: {
        lineStyle: {
          color: "#ccc",
        },
      },
      //  改变y轴字体颜色和大小
      axisLabel: {
        formatter: "{value}", //  给y轴添加单位
        textStyle: {
          color: "#ccc",
          fontSize: "12",
        },
      },
      // y轴线
      splitLine: {
        lineStyle: {
          color: "#ccc",
        },
      },
      axisTick: {
        show: false,
      },
    },
    {
      name: "降雨量(mm)",
      nameLocation: "start",
      max: 5,
      type: "value",
      inverse: true,
      axisLine: {
        lineStyle: {
          color: "#ccc",
        },
      },
      axisTick: {
        show: false,
      },
    },
  ],
  series: [
    {
      type: "scatter",
      name: "严重\n过低",
      data: [
        [1, 20],
        [1, 60],
      ],
      symbol: "circle",
      symbolSize: 10,
      showAllSymbol: true,
      lineStyle: {
        //设置折线色颜色
        color: "#66CDFB",
      },
      itemStyle: {
        //设置折线折点的颜色,
        normal: {
          color: "#66CDFB",
          // label: { show: true }
        },
      },
      // emphasis: {
      //   label: {
      //     show: true,
      //     formatter: function (param) {
      //       return param.data[3];
      //     },
      //     position: "bottom",
      //   },
      // },
    },
    {
      name: "血糖\n偏低",
      type: "scatter",
      data: [
        [5, 60],
        [5, 80],
      ],
      symbol: "circle",
      symbolSize: 10,
      showAllSymbol: true,
      lineStyle: {
        color: "#01C7BE",
      },
      itemStyle: {
        //设置折线折点的颜色,
        normal: {
          color: "#01C7BE",
          // label: { show: true }
        },
      },
      // emphasis: {
      //   label: {
      //     show: true,
      //     formatter: function (param) {
      //       return param.data[3];
      //     },
      //     position: "bottom",
      //   },
      // },
    },
    {
      name: "血糖\n正常",
      type: "scatter",
      data: [],
      symbol: "circle",
      symbolSize: 10,
      showAllSymbol: true,
      lineStyle: {
        color: "#90D049",
      },
      itemStyle: {
        //设置折线折点的颜色,
        normal: {
          color: "#90D049",
          // label: { show: true }
        },
      },
      // emphasis: {
      //   label: {
      //     show: true,
      //     formatter: function (param) {
      //       return param.data[3];
      //     },
      //     position: "bottom",
      //   },
      // },
    },
    {
      name: "轻度\n偏高",
      type: "scatter",
      data: [],
      symbol: "circle",
      symbolSize: 10,
      showAllSymbol: true,
      lineStyle: {
        color: "#FCD70A",
      },
      itemStyle: {
        //设置折线折点的颜色,
        normal: {
          color: "#FCD70A",
          // label: { show: true }
        },
      },

      // emphasis: {
      //   label: {
      //     show: true,
      //     formatter: function (param) {
      //       return param.data[3];
      //     },
      //     position: "bottom",
      //   },
      // },
    },
    {
      name: "血糖\n偏高",
      type: "scatter",
      data: [],
      symbol: "circle",
      symbolSize: 10,
      showAllSymbol: true,
      lineStyle: {
        color: "#FD961B",
      },
      itemStyle: {
        //设置折线折点的颜色,
        normal: {
          color: "#FD961B",
          // label: { show: true }
        },
      },

      // emphasis: {
      //   label: {
      //     show: true,
      //     formatter: function (param) {
      //       return param.data[3];
      //     },
      //     position: "bottom",
      //   },
      // },
    },
    {
      name: "严重\n过高",
      type: "scatter",
      data: [],
      symbol: "circle",
      symbolSize: 10,
      showAllSymbol: true,
      lineStyle: {
        color: "#EB6700",
      },
      itemStyle: {
        //设置折线折点的颜色,
        normal: {
          color: "#EB6700",
          // label: { show: true }
        },
      },
      // emphasis: {
      //   label: {
      //     show: true,
      //     formatter: function (param) {
      //       return param.data[3];
      //     },
      //     position: "bottom",
      //   },
      // },
    },
  ],}

x轴平行线

 
option = {
  color: "red",
  tooltip: {},
  xAxis: {
    type: "value",
  },
  yAxis: [
    {
    type: "category",
    data: ['3', '4', '1', '2', '5']
  },
  {
    type: "category",
    data: ['1', '2', '3','4', '5']
  }
    ],
  series: [
    {
      type: 'scatter',
      yAxisIndex: 1,
      symbolSize: 20,
      data: [
        ['1', '1'],
        ['1', '2'],
        ]
    },
    {
      symbolSize: 20,
      data: [
        ['2', '3'],
        ['2', '4'],
      ],
      markLine: {
              silent: true, // 鼠标悬停事件, true悬停不会出现实线
              symbol: 'none', // 去掉箭头
              data: [
                [
                  { 
                    coord: ['1', '3'],
                    lineStyle: {
                      width: 1,
                      type: 'solid',
                      color: 'red',
                    },
                  },
                  { 
                    coord: ['2', '3'],
                    lineStyle: {
                      width: 1,
                      type: 'solid',
                      color: 'red',
                    },
                  }
                ],
                [
                  { 
                    coord: ['1', '4'],
                    lineStyle: {
                      width: 1,
                      type: 'solid',
                      color: 'red',
                    },
                  },
                  { 
                    coord: ['2', '4'],
                    lineStyle: {
                      width: 1,
                      type: 'solid',
                      color: 'red',
                    },
                  }
                ]
              ]
            },
      type: 'scatter'
    }
  ]
};

网页调试:https://echarts.apache.org/examples/zh/editor.html?c=bar-stack

查看配置:https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

web修理工
关注
专栏目录
echars各种图表
Seven_Amber的博客
03-06 311
图表vue文件： <div class="content"> <div class="tit"> <h1>数据统计</h1> <span>Data statistics</span> <...
echars图表的使用
weixin_42275175的博客
07-22 189
统计内容：按照年月，统计消费额度 准备的Dao:按年月统计每个月的销售额 sql语句如下： 需要注意的：1,dao中数组大小跟sql语句查询返回的结果有关系 2,要在jsp页面中。添加显示位置的id。 select year(o_date) nian,MONTH(o_date) yue,sum(total) total from order_info GROUP BY(o_date...
Jupyter+Pyechars实现常见图表可视化
qq_52367382的博客
07-25 1364
【代码】Jupyter+Pyechars实现常见图表可视化。
echarts图表(可视化)的简单使用(推荐)
牛牪犇
09-22 988
1. 新建一个echarts.html文件，为ECharts准备一个具备大小（宽高）的节点（Dom）。 <!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" st
echarts：柱状图的常用操作
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
01-24 2819
柱状图的常用操作
HTML大屏报表-商品运营大数据-Echarts图表大屏-源码-解压即用.zip
06-21
Echarts图表库：集成丰富的图表类型，如折线图、柱状图、饼图等，轻松呈现复杂数据关系。 源码完整：提供完整的源码文件，解压即可使用，无需额外配置，节省开发时间。 即下即用：无需担心技术门槛，简单几步即可将...
HTML大屏报表-晋城高速综合管控大数据-Echarts图表大屏-源码-解压即用.zip
06-21
Echarts图表库：集成丰富的图表类型，如折线图、柱状图、饼图等，轻松呈现复杂数据关系。 源码完整：提供完整的源码文件，解压即可使用，无需额外配置，节省开发时间。 即下即用：无需担心技术门槛，简单几步即可将...
HTML大屏报表-无线网络大数据平台-Echarts图表大屏-源码-解压即用.zip
06-21
Echarts图表库：集成丰富的图表类型，如折线图、柱状图、饼图等，轻松呈现复杂数据关系。 源码完整：提供完整的源码文件，解压即可使用，无需额外配置，节省开发时间。 即下即用：无需担心技术门槛，简单几步即可将...
HTML大屏报表-兰州智慧消防大数据平台-Echarts图表大屏-源码-解压即用.zip
最新发布
06-21
Echarts图表库：集成丰富的图表类型，如折线图、柱状图、饼图等，轻松呈现复杂数据关系。 源码完整：提供完整的源码文件，解压即可使用，无需额外配置，节省开发时间。 即下即用：无需担心技术门槛，简单几步即可将...
HTML大屏报表-交通大数据展示平台-Echarts图表大屏-源码-解压即用.zip
06-21
Echarts图表库：集成丰富的图表类型，如折线图、柱状图、饼图等，轻松呈现复杂数据关系。 源码完整：提供完整的源码文件，解压即可使用，无需额外配置，节省开发时间。 即下即用：无需担心技术门槛，简单几步即可将...
Echart 的常用配置
zjq_1234的博客
10-12 1775
Echart 的常用配置
数据可视化ECharts的七大常用图表，看完就会用(1)
zag666的博客
03-31 8230
数据可视化 什么是数据可视化？ 数据可视化, 说白了, 就是把数据以更加直观的方式进行呈现。那什么方式是更加直观的方式呢? 就是图表。常言道, 文不如表, 表不如图, 人们大脑对图的敏感程度要比苍白无力的文字好很多。 通过图表可以很清楚的看到各项数据之间的关系：（下图是Echarts官网的一个例子） 数据可视化的好处 更直观的展示信息 清晰有效地传达与沟通信息 更容易洞察隐藏在数据中的信息 数据可视化的实现方式 ECharts是百度公司开源的一个使用JavaScript实现的开源可视化库，兼容性强，底
echarts使用之饼图
chunchun_H
06-20 1125
公司数据可视化项目需要大量的用到echarts图表，今天总结下饼图的使用。 参照echarts官方文档，三步走 1、引入echarts ：import echarts from “echarts”; 2、准备一个盒子 3、初始化echarts模型 下面是完整的代码 <template> <div class="pie-chart"></div> </template> <script> import echarts from "echa
echarts框架下大数据量展示的解决方案
weixin_43955315的博客
09-02 2万+
echarts+大数据量。这是个无解的问题！ 大数据量，什么样的数据才算大呢？在echart 4.5.0版本中，画折线图，数据线一共1001000条，每条数据5002200个数据点，即最小数据50000个点（五万个点），最大数据2200000个点（两百二十万个点）。在不同数据线、不同数据点的情况下，任意情况下出现不能够使图表进行流畅的放大缩小的现象，即可认为其数据量大。当放大缩小无法流畅地进行时，也意味着图表的数据交互，包括数据点的拖拽、图表平移、显示鼠标悬浮处的点的数据（tooltip）等都会有很明显的
echarts饼图美化
liuxiaochang_2011的博客
07-06 399
3 axisLine.lineStyle.width 需要和splitLine.distance 值一样 保证分辨率不同时位置一样。1 复制代码到echarts示例中，全部粘贴替换就可看到效果。2 echarts需要5以上版本。以此记录，需要拿走不谢。
Echarts配置项-2
神码属于浮云
10-31 2029
配置项setOption 、 polar、radiusAxis、angleAxis、radar、dataZoom
统计工作总结——Echars常用图表适用场景分析
Ask马小向的专栏
11-29 3094
一次偶然的机会听到开发做的统计图都是从echars上学习的，上网查了一下发现，echars上统计图形种类丰富，并且有实例，真是太棒了！不过选择太多也会有问题，这些图都适合什么场景呢，在什么情况下使用会更好呢，虽然现在只是用到了很小的部分，还是总结一下，以备以后之需。 一维数据 所谓的一维数据指使统计指标只有一个，如统计水果店中销售的苹果、梨、香蕉、桃子的数目。 （1）柱状图 场景：统计今天
ECharts 使用xAxis.axisLabel. color设置x坐标轴刻度标签颜色
旭东怪的博客
10-04 1万+
1 使用详解 xAxis.axisLabel. color 说明：刻度标签文字的颜色，支持回调函数。 默认值：'#333'。 参数类型：Color，Function。 可选值： （1）'red','#ccc'。 （2）color: function (value, index) { return value >= 0 ? 'green' : 'red'; }。 2 原始效果图 3 实现代码（设置x坐标轴刻度标签颜色） <body>...
Echarts字体和线条颜色设置操作笔记
热门推荐
杨秀璋的专栏
11-07 8万+
        这篇文章主要讲述Echarts设置字体和线条的颜色相关操作笔记，希望文章对你有所帮助，主要是自己的在线笔记吧。我在前面先放各种修改前后图片颜色的对照，后面再详细介绍代码。这样更方便阅读及读者知道，是否对自己有所帮助，其重点是如何在模板动态网页或JSP网站中插入Echarts图片。        1.修改标题及背景颜色          2.设置柱形图颜色        3.修改坐标...
echarts大数据图表样式demo
08-03
总结起来，echarts大数据图表样式demo提供了丰富的图表类型和样式配置选项，可以满足不同需求的数据可视化需求。我们可以根据自己的需求选择合适的图表类型和样式，使用echarts来展示大数据图表，并通过调整样式使得...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web修理工

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值