Home > Web Front-end > JS Tutorial > Implementation code of commonly used echarts charts

Implementation code of commonly used echarts charts

不言
Release: 2018-09-30 15:41:36
forward
5950 people have browsed it

This article brings you the implementation code of commonly used echarts charts. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The code of this article is developed based on ehcarts4.0

pie chart

Implementation code of commonly used echarts charts##

// 饼图配置项
    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;
                        }
                    }
                },
            }
        ]
    }
Copy after login
Stacked column chart

Implementation code of commonly used echarts charts

//堆叠柱状图配置项
  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]
          }
      ]
    }
Copy after login
Gradient column chart

Implementation code of commonly used echarts charts##

//配置项
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]
          }
      ]
  };
Copy after login
Line chart

Implementation code of commonly used echarts charts

//线图配置项
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]
          }
      ]
  }
Copy after login
Create an instance

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

Set the configuration items of the chart instance

Set the configuration items and data of the chart instance, universal interface, All parameter and data modifications can be completed through setOption. ECharts will merge the new parameters and data, and then refresh the chart
chart.setOption(option);
Copy after login

The above is the detailed content of Implementation code of commonly used echarts charts. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:segmentfault.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template