vue 常用的 Echarts 示例

vue 常用的 Echarts 示例

为啥要整理这一篇博文呢?其实最近做大屏做的恶心了,好多echarts图表,样式花里胡哨,调样式太费劲了,然后把做过的拿下来备份一下,需要的话直接粘贴稍作修改就可以了。
echarts配置项官网:https://echarts.apache.org/zh/option.html#title

多条柱形图

vue 常用的 Echarts 示例_第1张图片

	option = {
     
          animation: false,
          title: {
     
            text: '本周主煤流系统启动平均时长',
            textAlign: 'left',
            x: 'center',
            y: 'top',
            textStyle: {
     
              color: 'rgba(255, 255, 255, 0.8)',
              fontSize: 14
            }
          },
          color: ['#0d81f7', '#0fb42c'],
          tooltip: {
     },
          legend: {
     
            show: true,
            top: 18,
            right: 0,
            data: ["主煤流系统手动启动时长", "主煤流智能启动时长"],
            textStyle: {
     
              color: 'rgba(255, 255, 255, 0.8)',
              fontSize: 10
            },
            itemWidth: 10,
            itemHeight: 10
          },
          xAxis: {
     
            axisTick: {
     
              show: false
            },
            axisLine: {
     
              lineStyle: {
     
                color: '#0092D5'
              }
            },
            axisLabel: {
     
              color: 'rgba(255, 255, 255, 0.8)'
            },
            data: ['2020-01','2020-02','2020-03','2020-04','2020-05','2020-06'],
          },
          yAxis: {
     
            name: "(分钟)",
            nameTextStyle: {
     
              color: 'rgba(255, 255, 255, 0.8)',
              align: 'right'
            },
            splitLine: {
     
              lineStyle: {
     
                type: 'dashed',
                color: '#0092D5',
                opacity: 0.3
              }
            },
            axisLine: {
     
              show: false,
            },
            axisLabel: {
     
              color: 'rgba(255, 255, 255, 0.8)'
            },
          },
          grid: {
     
            top: '35%',
            bottom: '17%',
            left: '7%',
            right: '2%'
          },
          series: [{
     
            name: "主煤流系统手动启动时长",
            barWidth: 15,
            type: 'bar',
            data: [1,2,3,4,5,6],
            itemStyle: {
     
              normal: {
     
                label: {
     
                  show: true, //开启显示
                  position: 'insideLeft', //在上方显示
                  offset: [-8, 0],
                  textStyle: {
      //数值样式
                    color: '#fff',
                    fontSize: 10
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
     
                  offset: 0,
                  color: "#0069F5" // 0% 处的颜色
                }, {
     
                  offset: 1,
                  color: "#35C3FF" // 100% 处的颜色
                }], false)
              }
            },
          }, {
     
            name: "主煤流系统智能启动时长",
            barWidth: 15,
            type: 'bar',
            data: [2,3,4,5,6,7],
            itemStyle: {
     
              normal: {
     
                label: {
     
                  show: true, //开启显示
                  position: 'insideRight', //在上方显示
                  offset: [8, 0],
                  textStyle: {
      //数值样式
                    color: '#fff',
                    fontSize: 10
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
     
                  offset: 0,
                  color: "#03AC32" // 0% 处的颜色
                }, {
     
                  offset: 1,
                  color: "#69EF00" // 100% 处的颜色
                }], false)
              }
            },
          }]
        };

多条曲线图

vue 常用的 Echarts 示例_第2张图片

	option = {
     
          color: ['#1890FF', '#FF7D00'],
          tooltip: {
     },
          legend: {
     
            show: true,
            top: 15,
            right: 0,
            align: 'left',
            x: 'center',
            y: 'top',
            icon: 'rect',
            itemHeight: 5,
            itemWidth: 15,
            data: ["智能配煤","非智能配煤"],
            textStyle: {
     
              color: 'rgba(255, 255, 255, 0.8)',
              fontSize: 12
            },
          },
          xAxis: {
     
            axisTick: {
     
              show: false
            },
            axisLine: {
     
              lineStyle: {
     
                color: '#0092D5'
              }
            },
            axisLabel: {
     
              color: 'rgba(255, 255, 255, 0.8)'
            },
            data: ['2020-01','2020-02','2020-03','2020-04','2020-05','2020-06']
          },
          yAxis: {
     
            name: "(万元)",
            nameTextStyle: {
     
              color: 'rgba(255, 255, 255, 0.8)',
              align: 'right'
            },
            splitLine: {
     
              lineStyle: {
     
                type: 'dashed',
                color: '#0092D5',
                opacity: 0.3
              }
            },
            axisLine: {
     
              show: false,
            },
            axisLabel: {
     
              color: 'rgba(255, 255, 255, 0.8)'
            },
          },
          grid: {
     
            top: '25%',
            bottom: '10%',
            left: '10%',
            right: '2%'
          },
          series: [{
     
            name: "智能配煤",
            barWidth: 15,
            type: 'line',
            smooth: true,
            data: [1,2,3,4,5,6],
          }, {
     
            name: "非智能配煤",
            barWidth: 15,
            type: 'line',
            smooth: true,
            data: [3,4,5,6,7,8],
          }]
        };

柱形图配折线图

vue 常用的 Echarts 示例_第3张图片

	option = {
     
          title: {
     
            text: '近一周全矿井产量',
            textAlign: 'left',
            x: 'center',
            y: 'top',
            textStyle: {
     
              color: 'rgba(255, 255, 255, 0.8)',
              fontSize: 14
            }
          },
          color: ['#0d81f7', '#0fb42c', '#e97507'],
          tooltip: {
     },
          legend: {
     
            show: true,
            top: 3,
            right: 0,
            data: ["综采1","综采2", "总计"],
            textStyle: {
     
              color: 'rgba(255, 255, 255, 0.8)',
              fontSize: 12
            },
            itemWidth: 12,
            itemHeight: 12
          },
          xAxis: {
     
            axisTick: {
     
              show: false
            },
            axisLine: {
     
              lineStyle: {
     
                color: '#0092D5'
              }
            },
            axisLabel: {
     
              color: 'rgba(255, 255, 255, 0.8)'
            },
            data: ['2020-01','2020-02','2020-03','2020-04','2020-05','2020-06']
          },
          yAxis: {
     
            name: "(吨)",
            nameTextStyle: {
     
              color: 'rgba(255, 255, 255, 0.8)',
              align: 'right'
            },
            splitLine: {
     
              lineStyle: {
     
                type: 'dashed',
                color: '#0092D5',
                opacity: 0.3
              }
            },
            axisLine: {
     
              show: false,
            },
            axisLabel: {
     
              color: 'rgba(255, 255, 255, 0.8)'
            },
          },
          grid: {
     
            top: '20%',
            bottom: '10%',
            left: '10%',
            right: '2%'
          },
          series: [{
     
            name: "综采1",
            barWidth: 15,
            type: 'bar',
            data: [1,2,3,4,5,6],
            itemStyle: {
     
              normal: {
     
                label: {
     
                  show: true, //开启显示
                  position: 'insideLeft', //在上方显示
                  offset: [-8, 0],
                  textStyle: {
      //数值样式
                    color: '#fff',
                    fontSize: 10
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
     
                  offset: 0,
                  color: "#0069F5" // 0% 处的颜色
                }, {
     
                  offset: 1,
                  color: "#35C3FF" // 100% 处的颜色
                }], false)
              }
            },
          }, {
     
            name: "综采2",
            barWidth: 15,
            type: 'bar',
            data: [3,4,5,6,7,8],
            itemStyle: {
     
              normal: {
     
                label: {
     
                  show: true, //开启显示
                  position: 'insideRight', //在上方显示
                  offset: [8, 0],
                  textStyle: {
      //数值样式
                    color: '#fff',
                    fontSize: 10
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
     
                  offset: 0,
                  color: "#03AC32" // 0% 处的颜色
                }, {
     
                  offset: 1,
                  color: "#69EF00" // 100% 处的颜色
                }], false)
              }
            },
          }, {
     
            name: "总计",
            barWidth: 15,
            type: 'line',
            color: '#f67a03',
            data: [8,9,10,11,12,13],
          }]
        };

柱形图堆积

vue 常用的 Echarts 示例_第4张图片

	option = {
     
          color: ['#acff02', '#fac800', '#ff7d00', '#0fb42c'],
          tooltip: {
     
            trigger: 'axis',
            axisPointer: {
                 // Use axis to trigger tooltip
              type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
            }
          },
          legend: {
     
            show: true,
            top: 15,
            right: 0,
            x: 'center',
            y: 'top',
            data: ["生产队1","生产队2","生产队3", "总计"],
            textStyle: {
     
              color: 'rgba(255, 255, 255, 0.8)',
              fontSize: 12
            },
            itemWidth: 12,
            itemHeight: 12
          },
          xAxis: {
     
            axisTick: {
     
              show: false
            },
            axisLine: {
     
              lineStyle: {
     
                color: '#0092D5'
              }
            },
            axisLabel: {
     
              color: 'rgba(255, 255, 255, 0.8)'
            },
            data:  ['2020-01','2020-02','2020-03','2020-04','2020-05','2020-06']
          },
          yAxis: {
     
            name: "(吨)",
            nameTextStyle: {
     
              color: 'rgba(255, 255, 255, 0.8)',
              align: 'right'
            },
            splitLine: {
     
              lineStyle: {
     
                type: 'dashed',
                color: '#0092D5',
                opacity: 0.3
              }
            },
            axisLine: {
     
              show: false,
            },
            axisLabel: {
     
              color: 'rgba(255, 255, 255, 0.8)'
            },
          },
          grid: {
     
            top: '25%',
            bottom: '10%',
            left: '12%',
            right: '2%'
          },
          series: [{
     
            name:  "生产队1",
            barWidth: 15,
            type: 'bar',
            stack: 'total',
            emphasis: {
     
              focus: 'series'
            },
            data: [1,2,3,4,5,6],
            itemStyle: {
     
              normal: {
     
                label: {
     
                  show: true, //开启显示
                  position: 'insideRight', //在上方显示
                  offset: [-8, 0],
                  textStyle: {
      //数值样式
                    color: '#fff',
                    fontSize: 10
                  }
                },
              }
            },
          }, 
          
          {
     
            name: "生产队2",
            barWidth: 15,
            type: 'bar',
            stack: 'total',
            emphasis: {
     
              focus: 'series'
            },
            data:[2,3,4,5,6,7],
            itemStyle: {
     
              normal: {
     
                label: {
     
                  show: true, //开启显示
                  position: 'insideRight', //在上方显示
                  offset: [-8, 0],
                  textStyle: {
      //数值样式
                    color: '#fff',
                    fontSize: 10,
                  }
                },
              }
            },
          }, 
          
          {
     
            name: "生产队3",
            barWidth: 15,
            type: 'bar',
            stack: 'total',
            emphasis: {
     
              focus: 'series'
            },
            data:[5,6,7,8,9,10],
            itemStyle: {
     
              normal: {
     
                label: {
     
                  show: true, //开启显示
                  position: 'insideRight', //在上方显示
                  offset: [-8, 0],
                  textStyle: {
      //数值样式
                    color: '#fff',
                    fontSize: 10
                  }
                },
              }
            },
          }, {
     
            name: '总计',
            barWidth: 15,
            type: 'bar',
            data: [21,22,23,34,25,25],
            itemStyle: {
     
              normal: {
     
                label: {
     
                  show: true, //开启显示
                  position: 'insideLeft', //在上方显示
                  offset: [8, 0],
                  textStyle: {
      //数值样式
                    color: '#fff',
                    fontSize: 10
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
     
                  offset: 0,
                  color: "#0069F5" // 0% 处的颜色
                }, {
     
                  offset: 1,
                  color: "#35C3FF" // 100% 处的颜色
                }], false)
              }
            },
          }]
        };

饼图

vue 常用的 Echarts 示例_第5张图片

option = {
     
          title: {
     
            text: '各生产队工效',
            textAlign: 'left',
            x: 'center',
            y: 'top',
            top: '7%',
            textStyle: {
     
              color: 'rgba(255, 255, 255, 0.8)',
              fontSize: 12
            }
          },
          tooltip: {
     },
          legend: {
     
             orient: 'vertical',
             top: '50%',
             left: '15%',
             textStyle: {
     
              color: 'rgba(255, 255, 255, 0.8)',
              fontSize: 12
            },
            itemWidth: 12,
            itemHeight: 12
          },
          grid: {
     
            top: '20%',
            bottom: '10%',
            left: '10%',
            right: '10%'
          },
          series: [{
     
            name: '功效',
            type: 'pie',
            radius: [15, 70],
            center: ['68%', '60%'],
            // roseType: 'area',
            itemStyle: {
     
              borderRadius: 2
            },
            label: {
     
              position: 'inside',
              formatter: '{c}吨/人天',
              fontWeight: 600,
              color: '#fff'
            },
            data: [{
     
            	value:12,
            	name: "生产队1"
            },{
     
            	value:34,
            	name: "生产队2"
            },{
     
            	value:23,
            	name: "生产队3"
            }]
          }]
        };

进度环形图

vue 常用的 Echarts 示例_第6张图片

	option = {
     
          color: ['#414f5b', '#1890ff'],
          series: [
            {
     
              name: '任务进度',
              type: 'pie',
              radius: ['75%', '100%'],
              avoidLabelOverlap: false,
              hoverAnimation: false,
              labelLine: {
     
                normal: {
     
                  show: false
                }
              },
              data: [{
     
                value: 25,
                label: {
     
                  normal: {
     
                    show: false,
                  }
                }
              }, {
        // 数据值
                value: 75,
                // 数据项名称
                name: "采煤机开机率",
                //该数据项是否被选中
                selected: false,
                // 单个扇区的标签配置
                label: {
     
                  // 是显示标签
                  show: true,
                  position: 'center',
                  fontSize: 14,
                  color: '#fff',
                  lineHeight: 15,
                  formatter: '\n{b}\n\n ' + `{a| {c} }` + '\n\n%',
                  rich: {
     
                    a: {
     
                      color: '#1890ff',
                      fontSize: 30,
                      fontWeight: 600,
                    }
                  }
                },
              }]
            }
          ]
        };

雷达图

vue 常用的 Echarts 示例_第7张图片

	option = {
     
          color: ['#fa0145', '#02f8f9'],
          tooltip: {
     
            show: true
          },

          radar: {
     
            nameGap: 7,
            axisLine: {
     
              lineStyle: {
     
                color: '#0781c0',
                type: 'dashed'
              }
            },
            name: {
     
              color: '#fff'
            },
            splitLine: {
     
              lineStyle: {
     
                color: '#0781c0',
                type: 'dashed'
              }
            },
            splitArea: {
     
              show: false,
              areaStyle: {
     
                color: 'rgba(255,0,0,0)', // 图表背景的颜色
              },
            },
            indicator: ["人员","设备","环境","管理"]
          },
          series: [{
     
            name: '',
            type: 'radar',
            data: [
              {
     
                value: //[4200, 3000, 20000, 35000],
                name: '',
                areaStyle: {
     
                  color: '#fa0145',
                  opacity: 0.1,
                },
                itemStyle: {
      // 折线拐点标志的样式。
                  normal: {
      // 普通状态时的样式
                    lineStyle: {
     
                      width: 1
                    },
                    opacity: 0.2
                  },
                  emphasis: {
      // 高亮时的样式
                    lineStyle: {
     
                      width: 5
                    },
                    opacity: 1
                  }
                },
              },
              {
     
                value: [6200, 2000, 30000, 25000],
                name: '风险评估',
                areaStyle: {
     
                  color: '#02f8f9',
                  opacity: 0.1,
                },
                itemStyle: {
      // 折线拐点标志的样式。
                  normal: {
      // 普通状态时的样式
                    lineStyle: {
     
                      width: 1
                    },
                    opacity: 0.2
                  },
                  emphasis: {
      // 高亮时的样式
                    lineStyle: {
     
                      width: 5
                    },
                    opacity: 1
                  }
                },
              }
            ]
          }]
        };

你可能感兴趣的