Implementierungscode häufig verwendeter Echarts-Diagramme

Der Inhalt dieses Artikels befasst sich mit dem Implementierungscode häufig verwendeter Echarts-Diagramme. Er hat einen gewissen Referenzwert. Ich hoffe, dass er für Sie hilfreich ist.

Der Code dieses Artikels wurde auf Basis von ehcarts4.0 entwickelt

Kreisdiagramm

// 饼图配置项
    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;
                        }
                    }
                },
            }
        ]
    }

Gestapeltes Säulendiagramm

//堆叠柱状图配置项
  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]
          }
      ]
    }

Verlaufsbalkendiagramm

//配置项
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]
          }
      ]
  };

Liniendiagramm

//线图配置项
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]
          }
      ]
  }

Eine Instanz erstellen

var chart = echarts.init(document.getElementById('chartBox'));

Konfigurationselemente der Diagramminstanz festlegen

Konfigurationselemente festlegen und Daten der Diagramminstanz, universelle Schnittstelle. Alle Parameter- und Datenänderungen können über setOption abgeschlossen werden, die neuen Parameter und Daten zusammenführen und dann das Diagramm aktualisieren

Das obige ist der detaillierte Inhalt vonImplementierungscode häufig verwendeter Echarts-Diagramme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!