11
//本文代码基于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]
        }
    ]
};

利用富文本样式定制x轴文字

图片描述

option = {
     tooltip: {
        trigger: 'axis',
        axisPointer: {
                type: 'shadow'
            }
        },
    color:["#4680FF","#4ECB73"],
    xAxis: {
        type: 'category',
       axisLine:{
           lineStyle:{
               color:"#DBDBDB"
           }
       },
        data: ['低风险', '一般风险', '高风险', '极高风险'],
        axisLabel:{
            formatter:function(parmas){
                console.log(parmas)
                var res = '';
                switch (parmas) {
                    case '低风险':
                        res = '{a|低风险}'
                        break;
                    case '一般风险':
                        res = '{b|一般风险}'
                        break;
                    case '高风险':
                        res = '{c|高风险}'
                        break;
                    case '极高风险':
                        res = '{d|极高风险}'
                        break;
                    default:
                        // code
                }
                return res
            },
        
            rich: {
                a: {
                    color: 'white',
                    width:70,
                    padding:5,
                    borderRadius:5,
                    backgroundColor:'blue'
                },
                b: {
                    color: 'black',
                    width:70,
                    padding:5,
                    borderRadius:5,
                    backgroundColor:'yellow'
                },
                c: {
                    color: 'white',
                    width:70,
                    padding:5,
                    borderRadius:5,
                    backgroundColor:'orange'
                },
                d: {
                    color: 'white',
                    width:70,
                    padding:5,
                    borderRadius:5,
                    backgroundColor:'red'
                },
            }
        }
    },
    yAxis: {
        type: 'value',
        axisLine:{
            show:false
        },
        axisTick:{
            show:false
        },
        splitLine:{
            lineStyle:{
                color:"#EBEBEB"
            }
        }
    },
    series: [{
            name: '1月',
            type: 'bar',
            barGap:0,
            barWidth:20,
            label:{
                show: true,
                position: 'top',
                color: '#808080',
                
            },
            data: [78, 56, 35, 43,]
        },
        {
            name: '2月',
            type: 'bar',
            barGap:0,
            barWidth:20,
            label:{
                show: true,
                position: 'top',
                color: '#808080',
                
            },
            data: [23, 34, 78, 76]
        }]
};

饼图

图片描述

// 饼图配置项
    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) + '%' + ')' 
                            + '\n' + 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 + '<br/>风险值:' + 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: '最高检反贪局侦查处处长,汉东省人民检察院副检察长兼反贪局局长。<br/>经过与腐败违法分子的斗争,最终将一批腐败分子送上了审判台,<br/>正义战胜邪恶,自己也迎来了成长。',
                    symbolSize: 100,
                    itemStyle: {
                        normal: {
                            color: '#6696FF'
                        }
                    }
                }, {
                    name: '李达康',
                    des: '汉东省省委常委,京州市市委书记。是一个正义无私的好官。<br/>但为人过于爱惜自己的羽毛,对待身边的亲人和朋友显得有些无情。',
                    label: {
                        position: 'right',
                        formatter: '{b}'
                    },
                    itemStyle: {
                        normal: {
                            color: '#6696FF'
                        }
                    }
                }, {
                    name: '管',
                    des: '汉东省公安厅厅长',
                    symbolSize: 80
                }, {
                    name: '陈岩石',
                    des: '离休干部、汉东省检察院前常务副检察长。充满正义,平凡而普通的共 产 党人。<br/>对大老虎赵立春,以各种形式执着举报了十二年。<br/>在这场关系党和国家生死存亡的斗争中,老人家以耄耋高龄,<br/>义无反顾地背起了炸 药包,在反腐胜利前夕因病去世。',
                    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: '汉东省京州市公安局局长,充满正义,整治恶势力,<br/>在与检察部门的合作中从最初的质疑到之后的通力配合。',
                    label: {
                        position: 'right',
                        formatter: '{b}'
                    },
                    itemStyle: {
                        normal: {
                            color: '#6696FF'
                        }
                    }
                }, {
                    name: '程度',
                    label: {
                        position: 'right',
                        formatter: '{b}'
                    },
                    des: '汉东省京州市公安局光明区分局局长,因犯错误,被李达康书记和赵东来局长点名要清除公安队伍。<br/>但在高小琴的帮助下,祁同伟调他当上了省公安厅办公室副主任。<br/>尽管程度逃避了所有罪责,上面也有人保他,<br/>但最终还是在反贪局局长侯亮平的缜密侦查下被绳之于法。',
                }, {
                    name: '吴惠芬',
                    label: {
                        position: 'right',
                        formatter: '{b}'
                    },
                    des: '汉东省省委副书记高育良的妻子,汉东大学明史教授。',
                    itemStyle: {
                        normal: {
                            color: '#6696FF'
                        }
                    }
                }, {
                    name: '赵瑞龙',
                    label: {
                        position: 'right',
                        formatter: '{b}'
                    },
                    des: '副国级人物赵立春的公子哥,官二代,打着老子的旗子,<br/>黑白两道通吃,可谓呼风唤雨,权倾一时。',
                }, {
                    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
        }
    ]
};

区域折线图

clipboard.png

option = {
                tooltip: {
                    trigger: 'axis',
                    formatter:function(params){
                        const p = params[0];
                        const n = p.name;
                        const v = p.data;
                        const s = n + '<br/>风险值:' + 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);

dada86
993 声望22 粉丝

多努力一点点。


« 上一篇
Egg.js学习