echarts 柱状图 折线图 饼图

getEchart2(year, count) {
      var myChart = echarts.init(document.getElementById("mychart2"))
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            return '简易清洁生产企业' + '<br/>' +
            params.marker + ' ' + params.name + ': ' + params.value + '家'
          }
        },
        xAxis: {
          type: 'category',
          data: year,
          axisTick: {
            show: false //去除刻度线
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#ccc'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#000'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '企业数量:家',
          splitLine: {
            lineStyle: {
              type: 'dashed'
            },
            show: true
          },
          axisTick: {
            show: false //去除刻度线
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#000'
            }
          }
        },
        grid: {
          top: 30,
          left: 50,
          right: 20,
          bottom: 30
        },
        series: [
          {
            data: count,
            type: 'bar',
            barWidth: 30,
            color: '#5BC6FF',
            itemStyle: {
              normal: {
                //这里设置柱形图圆角 [左上角,右上角,右下角,左下角]
                barBorderRadius: [4, 4, 0, 0]
              }
            }
          }
        ]
      }
      myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },

// 配置项
var option = {
        color: ['#1890FF','#00AF91','#DF9C14'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['投入资金', '经济效益','投入产出比'],
          top: 10
        },
        xAxis: {
          type: 'category',
          data: year,
          axisTick: {
            show: false //去除刻度线
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#ccc'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#000'
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '资金:万元',
            splitLine: {
              lineStyle: {
                type: 'dashed'
              },
              show: true
            },
            axisTick: {
              show: false //去除刻度线
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#000'
              }
            },
            // min: 0,
            // max: LeftMax,
            // interval: LeftMax / spaceNum,
          },
          {
            type: 'value',
            name: '投入产出比',
            axisTick: {
              show: false //去除刻度线
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#000'
              },
              formatter: '{value} %'
            },
            min: 0,
            max: 100,
            interval: 10
            // min: 0,
            // max: RightMax,
            // interval: RightMax / spaceNum,
          }
        ],
        grid: {
          left: 50,
          right: 50,
          bottom: 30
        },
        series: [
          {
            name: '投入资金',
            type: 'bar',
            yAxisIndex: 0,
            barWidth: 30,
            itemStyle: {
              normal: {
                //这里设置柱形图圆角 [左上角,右上角,右下角,左下角]
                barBorderRadius: [4, 4, 0, 0]
              }
            },
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 万元';
              }
            },
            
            data: arr1
          },
          {
            name: '经济效益',
            type: 'bar',
            yAxisIndex: 0,
            barWidth: 30,
            itemStyle: {
              normal: {
                //这里设置柱形图圆角 [左上角,右上角,右下角,左下角]
                barBorderRadius: [4, 4, 0, 0]
              }
            },
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 万元';
              }
            },
            data: arr2
          },
          {
            name: '投入产出比',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' %';
              }
            },
            data: arr3
          }
        ]
      }

 

var option = {
        color: ['#409EFF','#00AF91'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          data: ['国际先进', '国内先进'],
        },
        grid: {
          top: 30,
          left: 50,
          right: 20,
          bottom: 30
        },
        series: [
         {
          name: '企业清洁生产水平评价',
          type: 'pie',
          radius: '70%',
          label: {
            // 图形的文字标签
            show: false,
            // position: "center",
            // 当指示文字超出区域 使用
            formatter: function (param) {
               console.log("text", param)
               let text = param.data.name;
               if (text.length < 15) {
                   return text + ':' + param.data.value
               } else {
                      return text.substring(0, 15) + '...' + '\n' + param.data.value
               }
            },
            rich: { value: { fontSize: 12, color: '#999999', 'max-width': '100px' } },
          },
          labelLine: {
            // 连接图形和文字的线条
            show: false,
          },
          data: [
            { value: 1048, name: '国际先进' },
            { value: 735, name: '国内先进' }
          ]
         }
        ]
      }

 

var option = {
        color: ['#00AC11','#1890FF'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['方案平均投入', '方案平均产出效益'],
        },
        xAxis: {
          type: 'category',
          data: year,
          axisTick: {
            show: false //去除刻度线
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#ccc'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#000'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '单位:万元',
          splitLine: {
            lineStyle: {
              type: 'dashed'
            },
            show: true
          },
          axisTick: {
            show: false //去除刻度线
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#000'
            }
          }
        },
        grid: {
          top: 30,
          left: 50,
          right: 20,
          bottom: 30
        },
        series: [
          {
            name: '方案平均投入',
            data: averageInput,
            type: 'line',
            stack: 'Total',
            areaStyle: {
              normal : {color : '#ccffd1'}
            },
          },
          {
            name: '方案平均产出效益',
            data: benefit,
            type: 'line',
            stack: 'Total',
            areaStyle: {
              normal : {color : '#cce6ff'}
            },
          }
        ]
      }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值