• echarts 立体图


    效果:

    var indictedCase = [10, 7, 15, 8, 6, 2, 1, 3,5,8,9];
        var option = {
           
            tooltip: {
                trigger: "axis",
                backgroundColor: 'rgb(11,11,81)',
                padding: [15,30],
                extraCssText: 'box-shadow: 0px 0px 25px 5px rgb(41, 95, 159) inset;border-radius:10px'
            },
            legend: {
                show: true,
                top: '5%',
                textStyle: {
                    color: "#fff"
                },
                data: ["数量", "金额1", "金额2"]
           },
           grid: {
              top: '20%',
              left: "3%",
              right: "4%",
              bottom: "2%",
              containLabel: true
           },
           xAxis: {
                  type: "category",
                  axisTick: {
                      show: false
                  },
                  axisLabel: {
                      //"rotate": 30,
                      interval: 0,
                      color: '#eee',
                      fontSize: 14
                  },
                  axisLine: {
                      lineStyle: {
                          color: "#5475c8"
                      }
                  },
                  data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月"]
           },
           yAxis: [{
                  type: "value",
                  name: "单位:(个)",
                  min: 0,
                  // "max": leftMax*2,
                  axisTick: {
                      show: false
                  },
                  splitLine: {
                      show: false,
                   lineStyle: {
                       color: 'transparent'
                   }  
                  },
                  splitNumber: 5,
                  axisLabel: {
                      show: true,
                      textStyle: {
                          color: "#eee"
                      }
                  },
                  nameTextStyle: {
                      color: "#fff"
                  },
                  axisLine: {
                      lineStyle: {
                          color: "#5475c8"
                      }
                  }
           }, {
                  type: "value",
                  name: "金额:(元)",
                  min: 0,
                  // "max": 15000,
                  axisTick: {
                      show: false
                  },
                  splitLine: {
                   lineStyle: {
                       color: 'rgba(255,255,255,0.2)'
                   }  
                  },
                  splitNumber: 5,
                  axisLabel: {
                      show: true,
                      textStyle: {
                          color: "#eee"
                      }
                  },
                  nameTextStyle: {
                      color: "#fff"
                  },
                  axisLine: {
                      lineStyle: {
                          color: "#5475c8"
                      }
                  }
           }],
           series: [{
                  name: "数量",
                  type: "bar",
                  barWidth: 8,
                  barGap: 0,
                  label: {
                      normal: {
                          show: false,
                          position: "insideRight"
                      }
                  },
                  itemStyle: {
                      normal: {
                          color: "#77f9ef"
                      }
                  },
                  data: indictedCase
           },{
                  name: "数量",
                  type: "bar",
                  barWidth: 8,
                  tooltip: {
                      show: false
                  },
                  label: {
                      normal: {
                          show: false,
                          position: "insideRight"
                      }
                  },
                  itemStyle: {
                      normal: {
                          color: "#52bbb3"
                      }
                  },
                  data: indictedCase
           },{
                  name: "数量",
                  type: "pictorialBar", // 长方体顶部四边形
                symbol: 'diamond',
                symbolRotate:0,
                symbolSize: ['16','10'],
                symbolOffset:['0','-5'],
                symbolPosition: 'end',
                z: 3, // 顶部四边形
                  tooltip: {
                      show: false
                  },
                  label: {
                      normal: {
                          show: false,
                          position: "insideRight"
                      }
                  },
                  itemStyle: {
                      normal: {
                          color: "#52bbb3"
                      }
                  },
                  data: indictedCase
           }, {
                  name: "金额1",
                  type: "line",
                  yAxisIndex: 1,
                  showAllSymbol: true,
                  symbol: "circle",
                  symbolSize: 10,
                  smooth: true,
                  itemStyle: {
                      color: "rgb(253,146,166)"
                  },
                  lineStyle: {
                      color: "rgb(253,146,166)"
                  },
                  data: [1000,1200,1500,1800,1700,1900,2000,2500,1500,1770,1300]
           },{
                  name: "金额2",
                  type: "line",
                  yAxisIndex: 1,
                  showAllSymbol: true,
                  symbol: "circle",
                  symbolSize: 10,
                  smooth: true,
                  itemStyle: {
                      color: "rgb(78,230,244)"
                  },
                  lineStyle: {
                      color: "rgb(78,230,244)"
                  },
                  data: [900,1000,1300,1700,1600,1900,1500,2100,2000,1500,1100]
           }]
        }
    View Code
  • 相关阅读:
    vue eslint报错解决办法
    vue动态修改title
    vue组件引入失败原因之一
    BootStrap 获得轮播中的索引和当前活动的焦点对象
    云开发创建云函数
    vue-cli打包后,图片路径不对
    vue打包完样式冲突
    css文字环绕
    Java——Netty Reactor模型(转)
    Java——Netty 线程模型与Reactor 模式(转)
  • 原文地址:https://www.cnblogs.com/luo1240465012/p/15072112.html
Copyright © 2020-2023  润新知