• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

vue 常用的 Echarts 示例

互联网 diligentman 2小时前 3次浏览

vue 常用的 Echarts 示例

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

多条柱形图

vue 常用的 Echarts 示例

	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 示例

	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 示例

	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 示例

	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 示例

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 示例

	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}nn ' + `{a| {c} }` + 'nn%',
                  rich: {
                    a: {
                      color: '#1890ff',
                      fontSize: 30,
                      fontWeight: 600,
                    }
                  }
                },
              }]
            }
          ]
        };

雷达图

vue 常用的 Echarts 示例

	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
                  }
                },
              }
            ]
          }]
        };


程序员灯塔
转载请注明原文链接:vue 常用的 Echarts 示例
喜欢 (0)