zoukankan      html  css  js  c++  java
  • echarts 立体柱

    option = {
        backgroundColor: '#0e202d',
        tooltip: {},
        xAxis: {
            data: ["企业", "农专", "个体"],
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                show: false,
                textStyle: {
                    color: '#e54035'
                }
            }
        },
        yAxis: {
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                show: false
            }
        },
        series: [{
            name: '年报上报率4',
            type: 'pictorialBar',
            symbolSize: [100, 45],
            symbolOffset: [0, -20],
            z: 12,
            itemStyle: {
                normal: {
                    color: '#14b11e'
                }
            },
            data: [{
                value: 100*2,
                symbolPosition: 'end'
            }, {
                value: 50*2,
                symbolPosition: 'end'
            }, {
                value: 20*2,//上下倆柱叠加值
                symbolPosition: 'end'
            }]
        }, {
            name: '年报上报率3',
            type: 'pictorialBar',
            symbolSize: [100, 45],
            symbolOffset: [0, -20],
            z: 12,
            itemStyle: {
                normal: {
                    color: '#14b11e'
                }
            },
            data: [{
                value: 100,
                symbolPosition: 'end'
            }, {
                value: 50,
                symbolPosition: 'end'
            }, {
                value: 20,
                symbolPosition: 'end'
            }]
        }, {
            name: '年报上报率2',
            type: 'pictorialBar',
            symbolSize: [100, 45],
            symbolOffset: [0, 20],
            z: 12,
            itemStyle: {
                normal: {
                    color: '#14b1eb'
                }
            },
            data: [100, 50, 20]
        }, {
            name: '年报上报率1',
            type: 'pictorialBar',
            symbolSize: [150, 75],
            symbolOffset: [0, 37],
            z: 11,
            itemStyle: {
                normal: {
                    color: 'transparent',
                    borderColor: '#14b1eb',
                    borderWidth: 5
                }
            },
            data: [100, 50, 20]
        }, {
            name: '年报上报率',
            type: 'pictorialBar',
            symbolSize: [200, 100],
            symbolOffset: [0, 50],
            z: 10,
            itemStyle: {
                normal: {
                    color: 'transparent',
                    borderColor: '#14b1eb',
                    borderType: 'dashed',
                    borderWidth: 5
                }
            },
            data: [100, 50, 20]
        }, {
            stack: '1',
            type: 'bar',
            itemStyle: {
                normal: {
                    color: '#14b1eb',
                    opacity: .7
                }
            },
            silent: true,
            barWidth: 100,
            barGap: '-100%', // Make series be overlap
            data: [100, 50, 20]
        }, {
            stack: '1',
            type: 'bar',
            itemStyle: {
                normal: {
                    color: '#14b11e',
                    opacity: .7
                }
            },
            silent: true,
            barWidth: 100,
            barGap: '-100%', // Make series be overlap
            data: [100, 50, 20]
        }]
    };

  • 相关阅读:
    03JavaScript实现轮播特效21
    03JavaScriptBOM(location...)20
    03JavaScriptBOM(window)19
    03JavaScriptDOM事件18
    03JavaScriptDOM基础17
    03JavaScript函数16
    03JavaScript的流程控制语句15
    03JavaScript语法14
    02css布局案例
    Sublime Text 3 配置 C/C++ 编译器
  • 原文地址:https://www.cnblogs.com/rengke2002/p/12402917.html
Copyright © 2011-2022 走看看