资讯专栏INFORMATION COLUMN

常用echarts图表

wapeyang / 2499人阅读

摘要:李达康汉东省省委常委,京州市市委书记。程度汉东省京州市公安局光明区分局局长,因犯错误,被李达康书记和赵东来局长点名要清除公安队伍。尽管程度逃避了所有罪责,上面也有人保他,但最终还是在反贪局局长侯亮平的缜密侦查下被绳之于法。

//本文代码基于ehcarts4.0开发
//https://cdn.bootcss.com/echarts/4.0.0/echarts.min.js
堆叠区域图

option = {
    title: {
        text: "堆叠区域图"
    },
    tooltip : {
        trigger: "axis",
        axisPointer: {
            type: "cross",
            label: {
                backgroundColor: "#6a7985"
            }
        }
    },
    legend: {
        top:0,
        right:0
    },
    grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
    },
    xAxis : [
        {
            type : "category",
            boundaryGap : false,
            data : ["周一","周二","周三","周四","周五","周六","周日"],
            
        }
    ],
    yAxis : [
        {
            type : "value",
            axisTick: { 
                show: true 
            },
            
        }
    ],
    series : [
        {
            name:"邮件营销",
            type:"line",
            smooth:true,
            symbolSize:2,
            showSymbol:false,
            symbol: "emptyCircle",
            stack: "总量",
            lineStyle:{
                color:"#9CDD47"
            },
            itemStyle:{
                color:"#9CDD47",
                borderWidth:2
            },
            areaStyle: {
                color:{
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: "rgba(156, 221, 71,0.2)" // 0% 处的颜色
                    }, {
                        offset: 1, color:"rgba(156, 221, 71, 0)"// 100% 处的颜色
                    }],
                }
            },
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:"联盟广告",
            type:"line",
            stack: "总量",
            smooth:true,
            symbolSize:2,
            showSymbol:false,
            symbol: "emptyCircle",
            lineStyle:{
                color:"#07FFFF"
            },
            itemStyle:{
                color:"#07FFFF",
                borderWidth:2
            },
            areaStyle: {
                color:{
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: "rgba(7, 255, 255, 0.2)" // 0% 处的颜色
                    }, {
                        offset: 1, color:"rgba(7, 255, 255, 0)"// 100% 处的颜色
                    }],
                }
            },
            data:[220, 182, 191, 234, 290, 330, 310]
        }
    ]
};
饼图

// 饼图配置项
    var option = {
        series: [
            {
                name:"风险预警占比",
                type: "pie",
                radius: ["25%", "40%"],
                center: ["50%", "50%"],
                roseType: false,
                data: [
                    {
                        value: 40,
                        name: "红色预警"
                    }, {
                        value: 30,
                        name: "橙色预警"
                    }, {
                        value: 10,
                        name: "黄色预警"
                    }, {
                        value: 50,
                        name: "蓝色预警"
                    }
                ],
                label: {
                    fontSize: 12,
                    color:"#545454",
                    formatter: function (param) {
                        return param.name + "(" + Math.round(param.percent) + "%" + ")" 
                            + "
" + param.value +  "个";
                    }
                },
                labelLine: {
                    smooth: false,
                    lineStyle: {
                        width: 2
                    }
                },
                itemStyle: {
                    color:function(params){
                        switch (params.name) {
                            case "红色预警":
                                return "#D70002";
                            case "橙色预警":
                                return "#FF9309";
                            case "黄色预警":
                                return "#FFFB09";
                            case "蓝色预警":
                                return "#035EF7";
                            default:
                                break;
                        }
                    }
                },
            }
        ]
    }
堆叠柱状图

//堆叠柱状图配置项
  var option = {
      backgroundColor: "#fff",
      tooltip: {
          trigger: "axis",
          axisPointer: {
              type: "shadow"
          }
      },
      legend: {
          bottom: "10",
          itemGap: 30,
          data: ["一级", "二级", "三级", "四级"]
      },
      grid: { //图表的位置
          top: 30,
          left: 10,
          right: 80,
          bottom: 60,
          containLabel: true
      },
      dataZoom: [
          {
              type: "inside"
          }, {
              type: "slider",
              start: 0,
              bottom: 40,
              height: "15px",
              fillerColor:"rgba(202,223,255,.8)",
              borderColor:"#b6d2fc",
              handleStyle:{
                  color:"#b6d2fc"
              },
              dataBackground:{
                  lineStyle:{
                      color:"#b6d2fc"
                  },
                  areaStyle:{
                      color:"rgba(202,223,255,.8)"
                  }
              }
          }
      ],
      yAxis: [
          {
              type: "value",
              name: "备案个数",
              nameTextStyle: {
                  fontSize: 12,
                  fontWeight: "bold",
                  color: "#454545"
              },
              splitLine: {
                  show: false
              },
              axisLine: {
                  lineStyle: {
                      color: "#B3B3B3"
                  }
              },
              axisLabel: {
                  color: "#454545"
              }
          }
      ],
      xAxis: [
          {
              type: "category",
              name: "区县名称",
              nameTextStyle: {
                  fontSize: 12,
                  fontWeight: "bold",
                  color: "#454545"
              },
              axisLine: {
                  lineStyle: {
                      color: "#B3B3B3"
                  }
              },
              axisLabel: {
                  color: "#454545"
              },
              data: ["鼓楼区","玄武区","秦淮区"]
          }
      ],
      series: [
          {
              name: "一级",
              type: "bar",
              stack: "总量",
              barWidth: "10px",
              itemStyle:{
                  color:"#D70002"
              },
              data: [2,4,6]
          },
          {
              name: "二级",
              type: "bar",
              stack: "总量",
              barWidth: "10px",
              data: [2,4,1]
          },
          {
              name: "三级",
              type: "bar",
              stack: "总量",
              barWidth: "10px",
              itemStyle:{
                  color:"#FFFB09"
              },
              data: [1,5,7]
          },
          {
              name: "四级",
              type: "bar",
              stack: "总量",
              barWidth: "10px",
              itemStyle:{
                  color:"#FF9309"
              },
              data: [1]
          }
      ]
    }
渐变柱状图

//配置项
var option = {
      backgroundColor: "#fff",
      color: [
          new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                  { offset: 0, color: "#23E9EE" },
                  { offset: 1, color: "#0460F7" }
              ]
          )
      ],
      tooltip: {
          trigger: "axis",
          axisPointer: {
              type: "shadow"
          }
      },
      legend: {
          bottom: "10",
          itemGap: 30,
          data: ["一级", "二级", "三级", "四级"]
      },
      grid: { //图表的位置
          top: 30,
          left: 10,
          right: 80,
          bottom: 60,
          containLabel: true
      },
      dataZoom: [
          {
              type: "inside"
          }, {
              type: "slider",
              start: 0,
              bottom: 40,
              height: "15px",
              fillerColor:"rgba(202,223,255,.8)",
              borderColor:"#b6d2fc",
              handleStyle:{
                  color:"#b6d2fc"
              },
              dataBackground:{
                  lineStyle:{
                      color:"#b6d2fc"
                  },
                  areaStyle:{
                      color:"rgba(202,223,255,.8)"
                  }
              }
          }
      ],
      yAxis: [
          {
              type: "value",
              name: "备案个数",
              nameTextStyle: {
                  fontSize: 12,
                  fontWeight: "bold",
                  color: "#454545"
              },
              splitLine: {
                  show: false
              },
              axisLine: {
                  lineStyle: {
                      color: "#B3B3B3"
                  }
              },
              axisLabel: {
                  color: "#454545"
              }
          }
      ],
      xAxis: [
          {
              type: "category",
              name: "区县名称",
              nameTextStyle: {
                  fontSize: 12,
                  fontWeight: "bold",
                  color: "#454545"
              },
              axisLine: {
                  lineStyle: {
                      color: "#B3B3B3"
                  }
              },
              axisLabel: {
                  color: "#454545"
              },
              data: ["鼓楼区","玄武区","秦淮区"]
          }
      ],
      series: [
          {
              name: "报警",
              type: "bar",
              stack: "总量",
              barWidth: "10px",
              data: [1,2,4]
          }
      ]
  };
线图

//线图配置项
var option = {
      tooltip: {
          trigger: "axis"
      },
      color: [
          new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                  {offset: 0, color: "#23E9EE"},
                  {offset: 1, color: "#0460F7"}
              ]
          )
      ],
      grid: {
          top: 30,
          left: 10,
          right: 30,
          bottom: 50,
          containLabel: true
      },
      dataZoom: [
          {
              type: "inside"
          }, {
              type: "slider",
              start: 0,
              bottom: 30,
              height: "15px",
              fillerColor:"rgba(202,223,255,.8)",
              borderColor:"#b6d2fc",
              handleStyle:{
                  color:"#b6d2fc"
              },
              dataBackground:{
                  lineStyle:{
                      color:"#b6d2fc"
                  },
                  areaStyle:{
                      color:"rgba(202,223,255,.8)"
                  }
              }
          }
      ],
      yAxis: [
          {
              type: "value",
              splitLine: {
                  show: false
              },
              axisLine: {
                  lineStyle: {
                      color: "#B3B3B3"
                  }
              },
              axisLabel: {
                  color: "#454545"
              }
          }
      ],
      xAxis: {
          type: "category",
          boundaryGap:false,
          axisLine: {
              lineStyle: {
                  color: "#B3B3B3"
              }
          },
          axisLabel: {
              color: "#454545"
          },
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
      },
      series: [
          {
              name: "报警个数",
              type: "line",
              symbol: "emptyCircle",
              symbolSize: 2,
              showSymbol: false,
              smooth: true,
              areaStyle: {
                  color: new echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                      [
                          {offset: 0, color: "rgba(35,233,238,.4)"},
                          {offset: 1, color: "rgba(4,96,247,.4)"}
                      ]
                  )
              },
              lineStyle: {
                  width: 1,
                  color: "#59cef5"
              },
              itemStyle: {
                  borderColor: "#59cef5",
                  borderWidth: 2
              },
              data:[2,4,3,2,1,4,2]
          }
      ]
  }
雷达图

option = {
                tooltip: {},
                radar: {
                    tooltip: {
                        trigger: "item",
                    },
                    radius:"70%",
                    center: ["50%", "55%"],
                   indicator: [
                         { name: "人", max: 50 },
                         { name: "管", max: 50 },
                         { name: "物", max: 50 },
                         { name: "环", max: 50 },
                         { name: "机", max: 200 },
                     ],
                    shape: "circle",
                    splitNumber: 4,
                   triggerEvent: true,
                    name: {
                        textStyle: {
                            color: "#3EB9F9",
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: [],
                        },
                    },
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: [
                                "rgba(38, 117, 222, 0.2)",
                                "rgba(38, 117, 222, 0.4)",
                                "rgba(38, 117, 222, 0.6)",
                                "rgba(38, 117, 222, 0.8)",
                            ].reverse(),
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#2675DE",
                        },
                    },
                },
                series: [
                    {
                        type: "radar",
                        tooltip: {
                            trigger: "item",
                        },
                        data: [
                            {
                               name: "",
                                value: [14, 19, 46, 46, 18],
                                label: {
                                    normal: {
                                       show: true,
                                    },
                                },
                           },
                      ],
                        lineStyle: {
                            normal: {
                                width: 1,
                                opacity: 1,
                            },
                        },
                        symbol: "none",
                        itemStyle: {
                            normal: {
                                color: "#07FFFF",
                            },
                        },
                        areaStyle: {
                            normal: {
                                opacity: 0.1,
                            },
                        },
                    },
                ],
            };
分段折线图

{
                tooltip: {
                    trigger: "axis",
                    formatter:function(params){
                        const p = params[0];
                        const n = p.name;
                        const v = p.data;
                        const s = n + "
风险值:" + v; return s; } }, backgroundColor: "#161627", grid:{ bottom:90, }, dataZoom: [ { type: "inside", }, { type: "slider", start: 0, bottom: 35, height: "10px", fillerColor: "rgba(38, 117, 222, 0.1)", borderColor: "#2675DE", handleStyle: { color: "#2675DE", }, textStyle:{ color:"#fff" }, dataBackground: { lineStyle: { color: "#2675DE", }, areaStyle: { color: "rgba(38, 117, 222, 0.1)", }, }, left:80, right:80, }, ], xAxis: { data: ["2019-03-18", "2019-03-19", "2019-03-20", "2019-03-21"], axisLine:{ lineStyle:{ color:"#86AFE5" } }, axisLabel: { interval: 0, rotate: 20 } }, yAxis: { splitLine: { show: true, interval:"0.2", lineStyle:{ color:"rgba(184, 184, 184, 0.2)" } }, axisLine:{ lineStyle:{ color:"#86AFE5" } }, interval: 1, }, visualMap: { orient:"horizontal", bottom: 0, left: "center", textStyle:{ color:"#fff" }, pieces: [ { label:"一般风险", gt:0, lte:0.45, color:"#035EF7", }, { label:"高风险", gt:0.45, lte:0.7, color:"#FFFB09", }, { label:"较高风险", gt:0.7, lte:0.86, color:"#FF9309", }, { label:"极高风险", gt:0.86, lte:1, color:"#D70002", }], outOfRange: { color: "#999", }, }, series: { name: "风险值", type: "line", smooth: true, symbolSize: 6, symbol:"circle", data:[0.2, 0.4, 0.8, 1], markLine: { symbol: ["none", "none"], data: [ { yAxis: 0.45, lineStyle: { color: "#FFFB09", type: "dotted", }, label: { position: "start", } }, { yAxis: 0.7, lineStyle: { color: "#FF9309", type: "dotted", }, label: { position: "start", } }, { yAxis: 0.86, lineStyle: { color: "#FF9309", type: "dotted", }, label: { position: "start", } } ], }, }, }
关系图

var links = [
    {
        source: "人",
        target: "现实风险",
        des: "侯亮平是高育良的得意门生"
    }, {
        source: "人",
        target: "管",
    }, {
        source: "安全管理",
        target: "人",
    }, {
        source: "赵立春",
        target: "赵瑞龙",
    }, {
        source: "赵立春",
        target: "刘新建",
    }, {
        source: "李达康",
        target: "赵立春",
    }, {
        source: "管",
        target: "高小琴",
    }, {
        source: "陈岩石",
        target: "机",
    }, {
        source: "陆亦可",
        target: "机",
    }, {
        source: "沙瑞金",
        target: "陈岩石",
    }, {
        source: "管",
        target: "机",
    }, {
        source: "管",
        target: "现实风险",
    }, {
        source: "现实风险",
        target: "机",
    }, {
        source: "人",
        target: "吴惠芬",
    }, {
        source: "机",
        target: "赵东来",
    }, {
        source: "高小琴",
        target: "高小凤",
        symbolSize: "1"
    }, {
        source: "赵东来",
        target: "陆亦可",
        //name: "爱慕"
    }, {
        source: "管",
        target: "程度",
        //name: "领导"
    }, {
        source: "人",
        target: "高小凤",
        //name: "情人"
    }, {
        source: "赵瑞龙",
        target: "管",
        symbolSize: "1",
    }, {
        source: "李达康",
        target: "赵东来",
    }, {
        source: "赵瑞龙",
        target: "程度",
        //name: "领导"
    }, {
        source: "沙瑞金",
        target: "李达康",
    }, {
        source: "沙瑞金",
        target: "人",
    }, {
        source: "管",
        target: "梁璐",
    }, {
        source: "吴惠芬",
        target: "梁璐",
    }, {
        source: "李达康",
        target: "欧阳菁",
    }, {
        source: "赵瑞龙",
        target: "刘新建",
    }, {
        source: "赵瑞龙",
        target: "高小琴",
        symbolSize: "1"
    }, {
        source: "赵瑞龙",
        target: "高小凤",
    }, {
        source: "吴心怡",
        target: "陆亦可",
    }, {
        source: "吴心怡",
        target: "吴惠芬",
        //name: "姐妹"
    }, {
        source: "物",
        target: "现实风险",
        //name: "发小"
    }, {
        source: "物",
        target: "欧阳菁",
        //name: "举报",
    }, {
        source: "欧阳菁",
        target: "刘新建",
        //name: "举报",
        
    }, {
        source: "刘新建",
        target: "赵瑞龙",
        //name: "举报",
        
    }, {
        source: "李达康",
        target: "丁义珍",
        //name: "领导"
    }, {
        source: "高小琴",
        target: "丁义珍",
        //name: "策划出逃"
    }, {
        source: "管",
        target: "丁义珍",
        //name: "勾结"
    }, {
        source: "赵瑞龙",
        target: "丁义珍",
        //name: "勾结"
    }];

    links.forEach(function(v) {
        v.name="";
        v.lineStyle = {
            color: "#ccc"
        };
    })

option = {
    title: { text: "关系图谱" },
    tooltip: {
        formatter: function (x) {
            return x.data.des;
        }
    },
    series: [
        {
            type: "graph",
            layout: "force",
            symbolSize: 40,
            roam: true,
            // edgeSymbol: ["circle", "arrow"],
            focusNodeAdjacency: true,
            edgeSymbolSize: [4, 10],
            edgeLabel: {
                normal: {
                    textStyle: {
                        fontSize: 20
                    }
                }
            },
            force: {
                repulsion: 2500,
                edgeLength: [10, 50]
            },
            draggable: true,
            itemStyle: {
                normal: {
                    borderWidth: 2,
                    color: "#6696FF",
                    shadowColor: "#6696FF",
                    shadowBlur: 10,
                    borderColor: "#fff"
                }
            },
            lineStyle: {
                normal: {
                    width: 2,
                    color: "#6696FF"
                }
            },
            edgeLabel: {
                normal: {
                    show: true,
                    formatter: function (x) {
                        return x.data.name;
                    }
                }
            },
            label: {
                normal: {
                    show: true,
                    textStyle: {
                    }
                }
            },
            data: [
                {
                    name: "现实风险",
                    des: "最高检反贪局侦查处处长,汉东省人民检察院副检察长兼反贪局局长。
经过与腐败违法分子的斗争,最终将一批腐败分子送上了审判台,
正义战胜邪恶,自己也迎来了成长。", symbolSize: 100, itemStyle: { normal: { color: "#6696FF" } } }, { name: "李达康", des: "汉东省省委常委,京州市市委书记。是一个正义无私的好官。
但为人过于爱惜自己的羽毛,对待身边的亲人和朋友显得有些无情。", label: { position: "right", formatter: "{b}" }, itemStyle: { normal: { color: "#6696FF" } } }, { name: "管", des: "汉东省公安厅厅长", symbolSize: 80 }, { name: "陈岩石", des: "离休干部、汉东省检察院前常务副检察长。充满正义,平凡而普通的共 产 党人。
对大老虎赵立春,以各种形式执着举报了十二年。
在这场关系党和国家生死存亡的斗争中,老人家以耄耋高龄,
义无反顾地背起了炸 药包,在反腐胜利前夕因病去世。", itemStyle: { normal: { color: "#6696FF" } }, label: { position: "right", formatter: "{b}" }, }, { name: "陆亦可", des: "汉东省检察院反贪局一处处长", itemStyle: { normal: { color: "#6696FF" } }, label: { position: "right", formatter: "{b}" }, }, { name: "人", des: "汉东省省委副书记兼政法委书记。年近六十,是一个擅长太极功夫的官场老手。侯亮平、陈海和祁同伟是其学生。", symbolSize: 80 }, { name: "沙瑞金", des: "汉东省省委书记", itemStyle: { normal: { color: "#6696FF" } }, label: { position: "right", formatter: "{b}" }, }, { name: "高小琴", label: { position: "right", formatter: "{b}" }, des: "山水集团董事长,是一位叱咤于政界和商界的风云人物,处事圆滑、精明干练。" }, { name: "高小凤", label: { position: "right", formatter: "{b}" }, }, { name: "安全管理", des: "汉东省京州市公安局局长,充满正义,整治恶势力,
在与检察部门的合作中从最初的质疑到之后的通力配合。", label: { position: "right", formatter: "{b}" }, itemStyle: { normal: { color: "#6696FF" } } }, { name: "程度", label: { position: "right", formatter: "{b}" }, des: "汉东省京州市公安局光明区分局局长,因犯错误,被李达康书记和赵东来局长点名要清除公安队伍。
但在高小琴的帮助下,祁同伟调他当上了省公安厅办公室副主任。
尽管程度逃避了所有罪责,上面也有人保他,
但最终还是在反贪局局长侯亮平的缜密侦查下被绳之于法。", }, { name: "吴惠芬", label: { position: "right", formatter: "{b}" }, des: "汉东省省委副书记高育良的妻子,汉东大学明史教授。", itemStyle: { normal: { color: "#6696FF" } } }, { name: "赵瑞龙", label: { position: "right", formatter: "{b}" }, des: "副国级人物赵立春的公子哥,官二代,打着老子的旗子,
黑白两道通吃,可谓呼风唤雨,权倾一时。", }, { name: "赵立春", label: { position: "right", formatter: "{b}" }, des: "副国级领导人,曾经的改革闯将,在权利面前,显得极其渺小。", }, { name: "机", itemStyle: { normal: { color: "#6696FF" } }, symbolSize: 80 }, { name: "梁璐", label: { position: "right", formatter: "{b}" }, itemStyle: { normal: { color: "#6696FF" } } }, { name: "刘新建", label: { position: "right", formatter: "{b}" }, }, { name: "欧阳菁", label: { position: "right", formatter: "{b}" }, }, { name: "吴心怡", label: { position: "right", formatter: "{b}" }, itemStyle: { normal: { color: "#6696FF" } } }, { name: "物", symbolSize: 80 }, { name: "丁义珍", label: { position: "right", formatter: "{b}" }, } ], links: links } ] };
区域折线图

option = {
                tooltip: {
                    trigger: "axis",
                    formatter:function(params){
                        const p = params[0];
                        const n = p.name;
                        const v = p.data;
                        const s = n + "
风险值:" + v; return s; } }, backgroundColor: "#161627", color:"#000", grid:{ bottom:90, }, legend:{ show:true, data:[ { name:"一般风险", icon:"circle", textStyle:{ color:"#fff" } } ] }, visualMap: { orient:"horizontal", bottom: 0, left: "center", textStyle:{ color:"#fff" }, pieces: [{ label:"一般风险", gt:0, lte:0.45, color:"#035EF7" }, { label:"高风险", gt:0.45, lte:0.7, color:"#FEEA45" },{ label:"较高风险", gt:0.7, lte:0.86, color:"#FF9309" },{ label:"极高风险", gt:0.86, lte:1, color:"#D70002" }], outOfRange: { color: "#999", }, }, dataZoom: [ { type: "inside", }, { type: "slider", start: 0, bottom: 35, height: "10px", fillerColor: "rgba(38, 117, 222, 0.1)", borderColor: "#2675DE", handleStyle: { color: "#2675DE", }, textStyle:{ color:"#fff" }, dataBackground: { lineStyle: { color: "#2675DE", }, areaStyle: { color: "rgba(38, 117, 222, 0.1)", }, }, left:80, right:80, }, ], xAxis: { data: ["2019-03-18", "2019-03-19", "2019-03-20", "2019-03-21"], axisLine:{ lineStyle:{ color:"#86AFE5" } }, axisLabel: { interval: 0, rotate: 20 } }, yAxis: { splitLine: { show: true, interval:"0.2", lineStyle:{ color:"rgba(184, 184, 184, 0.2)" } }, axisLine:{ lineStyle:{ color:"#86AFE5" } }, interval: 1, }, series: { name: "风险值", type: "line", smooth: true, symbolSize:8, symbol: "circle", lineStyle:{ color:"#000" }, itemStyle:{ borderWidth:2, borderColor:"#000" }, data:[0.2, 0.4, 0.8, 1], markLine: { symbol: ["none", "none"], data: [ { yAxis: 0.45, lineStyle: { color: "#035EF7", type: "solid", }, label: { position: "start", } }, { yAxis: 0.7, lineStyle: { color: "#FEEA45", type: "solid", }, label: { position: "start", } }, { yAxis: 0.86, lineStyle: { color: "#FF9309", type: "solid", }, label: { position: "start", } } ], }, markArea: { data: [ [{ name: "", yAxis: 0, itemStyle: { color: "#035EF7" }, }, { yAxis: 0.45 }], [{ name: "", yAxis: 0.45, itemStyle: { color: "#FEEA45" }, }, { yAxis: 0.7, }], [{ name: "", yAxis: 0.7, itemStyle: { color: "#FF9309" }, }, { yAxis: 0.9, }], [{ name: "", yAxis: 0.9, itemStyle: { color: "#D70002" }, }, { yAxis: 1, }] ] }, }, };
创建实例
var chart = echarts.init(document.getElementById("chartBox"));
设置图表实例的配置项
设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过setOption完成,ECharts 会合并新的参数和数据,然后刷新图表
chart.setOption(option);

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98084.html

相关文章

  • 前端开发者常用的9个JavaScript图表

    摘要:使用来呈现图表。允许用户在应用程序中创建美观的可复用的图表。它是基于创建的,是一个以数据为中心的图表库,可以改进数据可视化的效果。非常轻巧,并使用元素来创建很奇特的图表。是库中较为古老的图表库之一。总结以上介绍的库都是高质量的图表库。 当前,数据可视化已经成为数据科学领域非常重要的一部分。不同网络系统中产生的数据,都需要经过适当的可视化处理,以便更好的呈现给用户读取和分析。 对任何一个...

    luck 评论0 收藏0
  • 每周前端开源推荐第六期

    摘要:每周前端开源推荐第六期从名字就可以很容易的看出该项目的作用,解压缩。同时支持浏览器和。是任务调度的项目。初始化定义人物每三分钟触发一次触发一个交互式学习的方式。强烈建议大家先去体验一下的介绍是由百度团队开发的一款开源图表项目。 每周前端开源推荐第六期 43081j / rar.js Pure-JavaScript RAR reader using AJAX, File API...

    Salamander 评论0 收藏0
  • 每周前端开源推荐第六期

    摘要:每周前端开源推荐第六期从名字就可以很容易的看出该项目的作用,解压缩。同时支持浏览器和。是任务调度的项目。初始化定义人物每三分钟触发一次触发一个交互式学习的方式。强烈建议大家先去体验一下的介绍是由百度团队开发的一款开源图表项目。 每周前端开源推荐第六期 43081j / rar.js Pure-JavaScript RAR reader using AJAX, File API...

    channg 评论0 收藏0
  • 每周前端开源推荐第六期

    摘要:每周前端开源推荐第六期从名字就可以很容易的看出该项目的作用,解压缩。同时支持浏览器和。是任务调度的项目。初始化定义人物每三分钟触发一次触发一个交互式学习的方式。强烈建议大家先去体验一下的介绍是由百度团队开发的一款开源图表项目。 每周前端开源推荐第六期 43081j / rar.js Pure-JavaScript RAR reader using AJAX, File API...

    worldligang 评论0 收藏0
  • vue.js使用echarts一分钟简单入门

    摘要:图表的使用在企业级软件中使用越来越普遍,前端开发人员可以使用常用的开源库来进行图表展示的开发,公司最近提出需要丰富系统首页的内容,趁此机会分享一下如何在使用框架下使用确定你需要引入的版本官网地址或者安装按需引入。 图表的使用在企业级软件中使用越来越普遍,前端开发人员可以使用常用的echarts开源库来进行图表展示的开发,公司最近提出需要丰富系统首页的内容,趁此机会分享一下如何在使用vu...

    venmos 评论0 收藏0
  • vue.js使用echarts一分钟简单入门

    摘要:图表的使用在企业级软件中使用越来越普遍,前端开发人员可以使用常用的开源库来进行图表展示的开发,公司最近提出需要丰富系统首页的内容,趁此机会分享一下如何在使用框架下使用确定你需要引入的版本官网地址或者安装按需引入。 图表的使用在企业级软件中使用越来越普遍,前端开发人员可以使用常用的echarts开源库来进行图表展示的开发,公司最近提出需要丰富系统首页的内容,趁此机会分享一下如何在使用vu...

    chengtao1633 评论0 收藏0

发表评论

0条评论

wapeyang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<