温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue echart如何实现柱状图,电池图,3D柱图和3D圆柱图

发布时间:2022-01-24 09:32:06 阅读:445 作者:小新 栏目:开发技术
Vue开发者专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

这篇文章主要为大家展示了“Vue echart如何实现柱状图,电池图,3D柱图和3D圆柱图”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue echart如何实现柱状图,电池图,3D柱图和3D圆柱图”这篇文章吧。

电池图

Vue echart如何实现柱状图,电池图,3D柱图和3D圆柱图

let backgroundColor = 'rgba(0,0,0,1)';
let chartdata = [
    [111222333444],
    ['石油''煤矿''汽油''电力'],
];
var getmydmc = chartdata[1]; //数据点名称
var getmyd = chartdata[0]; //收入金额
var getmydzd = [];
let big = 0;
getmyd.forEach((el) => {
    if (!(el === undefined || el === '')) {
        if (big < Number(el)) {
            big = Number(el);
        }
    }
});
for (let i = 0; i < getmyd.length; i++) {
    getmydzd.push(big * 4);
}
//计算最大值
function calMax(arr) {
    let max = 0;
    arr.forEach((el) => {
        el.forEach((el1) => {
            if (!(el1 === undefined || el1 === '')) {
                if (max < Number(el1)) {
                    max = Number(el1);
                }
            }
        });
    });
    let maxint = Math.ceil(max / 9.5);
    //不让最高的值超过最上面的刻度
    let maxval = maxint * 10;
    //让显示的刻度是整数
    return maxval;
}
var max = Math.ceil(calMax([getmyd]) / 10) * 10;
option = {
    backgroundColor: backgroundColor,
    grid: {
        left'3%',
        right'13%',
        bottom'10%',
        top'10%',
        containLabeltrue,
    },
    tooltip: {
        formatter(params) => {
            if (params.name !== '') {
                return params.name' : ' + getmyd[params.dataIndex];
            }
        },
        textStyle: {
            align'left',
        },
    },
    xAxis: [
        {
            type'value',
            axisLabel: {
                margin5,
                color'#fff',
                formatterfunction (val) {
                    return val + '';
                },
                textStyle: {
                    fontSize'13',
                },
            },
            min0,
            max: max, // 计算最大值
            interval: max / 5//  平均分为5份
            splitNumber5,
            splitLine: {
                showfalse,
                lineStyle: {
                    color'#fff',
                },
            },
            axisLine: {
                showtrue,
                lineStyle: {
                    color'#fff',
                    width1,
                    opacity0.3,
                },
            },
            axisTick: {
                showfalse,
            },
        },
        {
            type'value',
            axisLabel: {
                showfalse,
            },
            min0,
            max: max, // 计算最大值
            interval: max / 10//  平均分为5份
            splitNumber10,
            splitLine: {
                showfalse,
                lineStyle: {
                    type'dashed',
                    color'#D8D8D8',
                },
            },
            axisLine: {
                showfalse,
                lineStyle: {
                    color'#fff',
                },
            },
            axisTick: {
                showfalse,
            },
        },
    ],
    yAxis: [
        {
            type'category',
            inversetrue,
            //  boundaryGap:true,
            axisLabel: {
                formatter(value, index) => {
                    if (value.length >= 12) {
                        value = value.slice(012) + `\n` + value.slice(12);
                    }
                    if (value.length >= 26) {
                        value = value.slice(026) + `\n` + value.slice(26);
                    }
                    return value;
                },
                textStyle: {
                    color'rgba(255,255,255,0.8)',
                    fontSize'12',
                    align'right',
                    lineHeight18,
                },
            },
            splitLine: {
                showfalse,
            },
            axisTick: {
                showfalse,
            },
            axisLine: {
                lineStyle: {
                    color'#fff',
                    width1,
                    opacity0.3,
                },
            },
            data: getmydmc,
        },
    ],
    dataZoom: [
        {
            type'inside',
            showtrue,
            height15,
            start1,
            end100,
            orient'vertical',
            zlevel66,
        },
    ],
    series: [
        {
            name'值',
            type'bar',
            // zlevel: 1,
            xAxisIndex0,
            itemStyle: {
                normal: {
                    // barBorderRadius: [0, 5, 5, 0],
                    color: {
                        colorStops: [
                            {
                                offset0,
                                color'#40cbe8'// 0% 处的颜色
                            },
                            {
                                offset1,
                                color'#3afbc2'// 100% 处的颜色
                            },
                        ],
                    },
                },
            },
            barWidth15,
            data: getmyd,
            z0,
        },
        {
            // 分隔
            type'pictorialBar',
            itemStyle: {
                normal: {
                    color'#022539',
                },
            },
            symbolRepeat'fixed',
            symbolMargin4,
            symbol'rect',
            symbolCliptrue,
            symbolSize: [215],
            symbolPosition'start',
            symbolOffset: [-10],
            data: getmydzd,
            z66,
            animationEasing'elasticOut',
        },
        {
            name'背景',
            type'bar',
            barWidth15,
            barGap'-100%',
            xAxisIndex1,
            data: getmydzd,
            itemStyle: {
                normal: {
                    color: {
                        colorStops: [
                            {
                                offset0,
                                color'rgba(24,144,255,0.3)'// 0% 处的颜色
                            },
                            {
                                offset1,
                                color'rgba(99,180,255,0.3)'// 100% 处的颜色
                            },
                        ],
                    },
                },
            },
            z0,
        },
        {
            // 外边框
            type'pictorialBar',
            symbol'rect',
            itemStyle: {
                normal: {
                    color'none',
                },
            },
            label: {
                normal: {
                    formatter(params) => {
                        var text;
                        if (params.dataIndex == 1) {
                            text = '{f|  ' + params.data + '}';
                        } else if (params.dataIndex == 2) {
                            text = '{f|  ' + params.data + '}';
                        } else if (params.dataIndex == 3) {
                            text = '{f|  ' + params.data + '}';
                        } else {
                            text = '{f|  ' + params.data + '}';
                        }
                        return text;
                    },
                    rich: {
                        f: {
                            color'#ccfff4',
                            fontSize'22',
                        },
                    },
                    position'right',
                    padding: [000, -10],
                    showtrue,
                },
            },
            data: getmyd,
            z77,
            animationEasing'elasticOut',
        },
    ],
};

3D柱状图+3个柱图+图例不能点击

Vue echart如何实现柱状图,电池图,3D柱图和3D圆柱图

// mock数据
const dataArr = {
    xdata: ['01.01''01.02''01.03''01.04''01.05''01.06''01.07'],
    vaccination: [100013001200800600700900],
    unvaccinated: [700800900500300400500],
    unvaccinatedTwo: [400300500200100100300],
    rateDataOne: [989697929495100],
    rateDataTwo: [88868782848595],
}
// tooltip
const tooltip = { 
    trigger"axis",
    textStyle: { fontSize'100%' },
    formatterparams => {
        let rander = params.map(item => item.seriesType !== "pictorialBar" ? `<div>${item.seriesName}${item.seriesType !== "line" ? item.value : item.value + "%"}</div>` : '').join('')
        return `
            <div>${params[0].axisValue}</div>
            ${rander}
        `
    }
}
const legend = {
    data: ['应接种''已完成第一次接种''已完成第二次接种''完成第一次接种率''完成第二次接种率'],
    textStyle: { fontSize14color'#fff'},
    itemWidth25,
    itemHeight15,
    itemGap15,
    bottom'5%',
    selectedModefalse
}
const grid = { top'18%'left'10%'right'6%'bottom'25%'}
// xAxis
const xAxis = { 
    axisTick: { showtrue },
    axisLine: { lineStyle: { color'rgba(255,255,255, .2)' } },
    axisLabel: { textStyle: { fontSize12color'#fff'  }, },
    data: dataArr.xdata
}
// yAxis
const yAxis = [{ 
    axisTick: { showfalse },
    axisLine: { showfalse, },
    splitLine: { lineStyle: { color'rgba(255,255,255, .05)' } },
    axisLabel: { textStyle: { fontSize16color'#fff' } }
},{
    showtrue,
    max100,
    splitLine: { show:false },
    axisLine: { showfalse },
    axisTick: { showfalse },
    axisLabel: { 
        textStyle: { fontSize16color'#fff' },
        formatterparams => {
            return `${params}%`
        }
    }
}]
// series
const series = [{
    z1,
    name'上部1',
    type'pictorialBar',
    symbolPosition'end',
    data: dataArr.vaccination,
    symbol : 'diamond',
    symbolOffset: ['-50%''-50%'],
    symbolSize: [2919],
    itemStyle: {
        borderColor'#2fffa4',
        color'#2fffa4'
    },
},{
    z1,
    type'bar',
    name'应接种',
    barWidth30,
    barGap'-50%',
    data: dataArr.vaccination,
    itemStyle: {
        color: {
            type'linear',
            x0x21y0y20,
            colorStops: [
                { offset0color'rgba(29, 245, 160, .7)' }, 
                { offset0.5color'rgba(29, 245, 160, .7)' }, 
                { offset0.5color'rgba(29, 245, 160, .3)' }, 
                { offset1color'rgba(29, 245, 160, .3)' }
            ]
        }
    },
},{
    z2,
    name'上部1',
    type'pictorialBar',
    symbolPosition'end',
    data: dataArr.unvaccinated,
    symbol : 'diamond',
    symbolOffset: [0'-50%'],
    symbolSize: [2919],
    itemStyle: {
        borderColor'#32ffee',
        color'#32ffee'
    },
},{
    z2,
    type'bar',
    name'已完成第一次接种',
    barWidth30,
    data: dataArr.unvaccinated,
    itemStyle: {
        color: {
            type'linear',
            x0x21y0y20,
            colorStops: [
                { offset0color'rgba(50, 255, 238, .7)' }, 
                { offset0.5color'rgba(50, 255, 238, .7)' }, 
                { offset0.5color'rgba(50, 255, 238, .3)' }, 
                { offset1color'rgba(50, 255, 238, .3)' }
            ]
        }
    },
}, {
    z3,
    name'上部1',
    type'pictorialBar',
    symbolPosition'end',
    data: dataArr.unvaccinatedTwo,
    symbol : 'diamond',
    symbolOffset: ['50%''-50%'],
    symbolSize: [2919],
    itemStyle: {
        borderColor'#ffd11a',
        color'#ffd11a'
    },
},{
    z3,
    type'bar',
    name'已完成第二次接种',
    barWidth30,
    data: dataArr.unvaccinatedTwo,
    itemStyle: {
        color: {
            type'linear',
            x0x21y0y20,
            colorStops: [
                { offset0color'rgba(255, 209, 26, .7)' }, 
                { offset0.5color'rgba(255, 209, 26, .7)' }, 
                { offset0.5color'rgba(255, 209, 26, .3)' }, 
                { offset1color'rgba(255, 209, 26, .3)' }
            ]
        }
    },
}, {   
    z9,
    yAxisIndex1,
    name'完成第一次接种率'type'line',
    symbol`path://M9.312,4.594 C12.074,4.594 14.313,6.832 14.313,9.594 C14.313,12.355 12.074,14.594 9.312,14.594 C6.551,14.594 4.312,12.355 4.312,9.594 C4.312,6.832 6.551,4.594 9.312,4.594 Z`,
    symbolSize: [1010],
    color: { 
        type'linear',x1y0x20y20,
        // 0% 处的颜色                           // 100% 处的颜色
        colorStops: [{ offset0color'#32ffee' }, { offset1color'#8afff5'}],
        globalfalse // 缺省为 false
    },
    lineStyle: { color: { 
        type'linear',x1y0x20y20,
        // 0% 处的颜色                           // 100% 处的颜色
        colorStops: [{ offset0color'#32ffee' }, { offset1color'#8afff5'}],
        globalfalse // 缺省为 false
    }}, 
    // 修改的是线下区域的颜色
    areaStyle: { 
        colornew echarts.graphic.LinearGradient(
        // 右/下/左/上
        0001,[
            { offset0color'rgba(50, 255, 238, .1)' },
            { offset1color'transparent' }
        ])
    },
    label: {
        showtrue,
        position'insideBottomLeft',
        formatterparams => {
            return `${params.value}%`
        },
        textStyle: { fontSize16color'#32ffee' } 
    },
    data: dataArr.rateDataOne
}, {   
    z9,
    yAxisIndex1,
    name'完成第二次接种率'type'line',
    symbol`path://M9.312,4.594 C12.074,4.594 14.313,6.832 14.313,9.594 C14.313,12.355 12.074,14.594 9.312,14.594 C6.551,14.594 4.312,12.355 4.312,9.594 C4.312,6.832 6.551,4.594 9.312,4.594 Z`,
    symbolSize: [1010],
    color: { 
        type'linear',x1y0x20y20,
        // 0% 处的颜色                           // 100% 处的颜色
        colorStops: [{ offset0color'#ffd11a' }, { offset1color'#fff5cc'}],
        globalfalse // 缺省为 false
    },
    lineStyle: { color: { 
        type'linear',x1y0x20y20,
        // 0% 处的颜色                           // 100% 处的颜色
        colorStops: [{ offset0color'#ffd11a' }, { offset1color'#fff5cc'}],
        globalfalse // 缺省为 false
    }}, 
    // 修改的是线下区域的颜色
    areaStyle: { 
        colornew echarts.graphic.LinearGradient(
        // 右/下/左/上
        0001,[
            { offset0color'rgba(255, 209, 26, .2)' },
            { offset1color'transparent' }
        ])
    },
    label: {
        showtrue,
        position'insideBottomRight',
        formatterparams => {
            return `${params.value}%`
        },
        textStyle: { fontSize16color'#ffd11a' } 
    },
    data: dataArr.rateDataTwo
}]
option = { tooltip, xAxis, yAxis, series, grid, legend, backgroundColor'rgba(0, 0, 0, .7)' }

3D圆筒柱状图

Vue echart如何实现柱状图,电池图,3D柱图和3D圆柱图

xData = ["正常设备""报警设备""离线设备""故障设备"];
yData = [14350, 298, 5037, 239];
option = {
    backgroundColor: '#061326',
    "grid": {
        "top""25%",
        "left""-5%",
        "bottom""5%",
        "right""5%",
        "containLabel"true
    },
    tooltip: {
        show: true
    },
    animation: false,
    "xAxis": [{
        "type""category",
        "data": xData,
        "axisTick": {
            "alignWithLabel"true
        },
        "nameTextStyle": {
            "color""#82b0ec"
        },
        "axisLine": {
            show: false,
            "lineStyle": {
                "color""#82b0ec"
            }
        },
        "axisLabel": {
            "textStyle": {
                "color""#fff"
            },
            margin: 30
        }
    }],
    "yAxis": [{
        show: false,
        "type""value",
        "axisLabel": {
            "textStyle": {
                "color""#fff"
            },
        },
        "splitLine": {
            "lineStyle": {
                "color""#0c2c5a"
            }
        },
        "axisLine": {
            "show"false
        }
    }],
    "series": [{
            "name""",
            type'pictorialBar',
            symbolSize: [40, 10],
            symbolOffset: [0, -6],
            symbolPosition: 'end',
            z: 12,
            // "barWidth""0",
            "label": {
                "normal": {
                    "show"true,
                    "position""top",
                    // "formatter""{c}%"
                    fontSize: 15,
                    fontWeight: 'bold',
                    color: '#34DCFF'
                }
            },
            color: "#2DB1EF",
            data: yData
        },
        {
            name: '',
            type'pictorialBar',
            symbolSize: [40, 10],
            symbolOffset: [0, 7],
            // "barWidth""20",
            z: 12,
            "color""#2DB1EF",
            "data": yData
        },
        {
            name: '',
            type'pictorialBar',
            symbolSize: [50, 15],
            symbolOffset: [0, 12],
            z: 10,
            itemStyle: {
                normal: {
                    color: 'transparent',
                    borderColor: '#2EA9E5',
                    borderType: 'solid',
                    borderWidth: 1
                }
            },
            data: yData
        },
        {
            name: '',
            type'pictorialBar',
            symbolSize: [70, 20],
            symbolOffset: [0, 18],
            z: 10,
            itemStyle: {
                normal: {
                    color: 'transparent',
                    borderColor: '#19465D',
                    borderType: 'solid',
                    borderWidth: 2
                }
            },
            data: yData
        },
        {
            type'bar',
            //silent: true,
            "barWidth""40",
            barGap: '10%', // Make series be overlap
            barCateGoryGap: '10%',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                            offset: 0,
                            color: "#38B2E6"
                        },
                        {
                            offset: 1,
                            color: "#0B3147"
                        }
                    ]),
                    opacity: .8
                },
            },
            data: yData
        }
    ]
};

3D圆筒柱状图+背景

Vue echart如何实现柱状图,电池图,3D柱图和3D圆柱图

var xData2 = ["容城谷庄","雄县七间房","安新三台","雄县张岗","安新寨里"];
var data1 = [200,100,200,200,100];
var data2 = [300,200,300,300,400];
option = {
    backgroundColor: '#021132',
    tooltip: {
        trigger: 'item',
    },
    grid:{
        left:100,
        bottom:100
    },
    xAxis: {
        data: xData2,
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            interval:0,
            textStyle: {
                color: '#fff',
                fontSize:20,
            },
            margin: 20//刻度标签与轴线之间的距离。
        },
    },
    yAxis: {
        splitLine: {
            show: false,
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            textStyle: {
                color: '#fff',
                fontSize:20,
            },
        }
    },
    series: [
            {//三个最低下的圆片
                "name""",
                "type""pictorialBar",
                "symbolSize": [4525],
                "symbolOffset": [010],
                "z"12,
                itemStyle:{
                    opacity:1,
                    color: function(params){
                        var a = params.name.slice(0,2);
                        if(a === '容城'){
                            return new echarts.graphic.LinearGradient(0001, [{
                                offset0,
                                color'#FF9A22' // 0% 处的颜色
                            }, {
                                offset1,
                                color:  '#FFD56E'// 100% 处的颜色
                            }], false)
                        }else if(a === '雄县' || a === '雄州'){
                            return new echarts.graphic.LinearGradient(0001, [{
                                offset0,
                                color'#00EC28' // 0% 处的颜色
                            }, {
                                offset1,
                                color:  '#5DF076'// 100% 处的颜色
                            }], false)
                        }else if(a === '安新'){
                            return new echarts.graphic.LinearGradient(0001, [{
                                offset0,
                                color'#12B9DB' // 0% 处的颜色
                            }, {
                                offset1,
                                color:  '#6F8EF2'// 100% 处的颜色
                            }], false)
                        }
                    }
                },
                "data": [1,1,1,1,1]
            },

            //下半截柱状图
            {
                name: '2020',
                type: 'bar',
                barWidth: 45,
                barGap: '-100%',
                itemStyle: {//lenged文本
                    opacity:.7,
                    color: function(params){
                        var a = params.name.slice(0,2);
                        if(a === '容城'){
                            return new echarts.graphic.LinearGradient(0001, [{
                                offset0,
                                color'#FF9A22' // 0% 处的颜色
                            }, {
                                offset1,
                                color:  '#FFD56E'// 100% 处的颜色
                            }], false)
                        }else if(a === '雄县' || a === '雄州'){
                            return new echarts.graphic.LinearGradient(0001, [{
                                offset0,
                                color'#00EC28' // 0% 处的颜色
                            }, {
                                offset1,
                                color:  '#5DF076'// 100% 处的颜色
                            }], false)
                        }else if(a === '安新'){
                            return new echarts.graphic.LinearGradient(0001, [{
                                offset0,
                                color'#12B9DB' // 0% 处的颜色
                            }, {
                                offset1,
                                color:  '#6F8EF2'// 100% 处的颜色
                            }], false)
                        }
                    }
                },
                data: data1
            },
            { // 替代柱状图 默认不显示颜色,是最下方柱图(邮件营销)的value值 - 20
                type: 'bar',
                barWidth: 45,
                barGap: '-100%',
                stack: '广告',
                itemStyle: {
                    color: 'transparent'
                },
                data: data1
            },
            {
                "name"""//头部
                "type""pictorialBar",
                "symbolSize": [4525],
                "symbolOffset": [0, -10],
                "z"12,
                "symbolPosition""end",
                itemStyle:{
                    color:'#163F7A',
                    opacity:1,
                },
                "data": data2
            },
            {
                "name""",
                "type""pictorialBar",
                "symbolSize": [4525],
                "symbolOffset": [0, -10],
                "z"12,
                itemStyle:{
                    opacity:1,
                    color: function(params){
                        var a = params.name.slice(0,2);
                        if(a === '容城'){
                            return new echarts.graphic.LinearGradient(0001, [{
                                offset0,
                                color'#FF9A22' // 0% 处的颜色
                            }, {
                                offset1,
                                color:  '#FFD56E'// 100% 处的颜色
                            }], false)
                        }else if(a === '雄县' || a === '雄州'){
                            return new echarts.graphic.LinearGradient(0001, [{
                                offset0,
                                color'#00EC28' // 0% 处的颜色
                            }, {
                                offset1,
                                color:  '#5DF076'// 100% 处的颜色
                            }], false)
                        }else if(a === '安新'){
                            return new echarts.graphic.LinearGradient(0001, [{
                                offset0,
                                color'#12B9DB' // 0% 处的颜色
                            }, {
                                offset1,
                                color:  '#6F8EF2'// 100% 处的颜色
                            }], false)
                        }
                    }
                },
                "symbolPosition""end",
                "data": data1
            },
            {
                name: '2019',
                type: 'bar',
                barWidth: 45,
                barGap: '-100%',
                z:0,
                itemStyle: {
                    color: '#163F7A',
                    opacity:.7,
                },
                data: data2
            }

        ]
};

电池图

Vue echart如何实现柱状图,电池图,3D柱图和3D圆柱图

var  category= [{
         name: "血糖偏高",
        value: 2500
    },
    {
        name: "血糖偏低",
        value: 8000
    },
    {
        name: "血压偏高",
        value: 3000
    },
    {
        name: "血压偏低",
        value: 3000
    },
    {
        name: "当日新增",
        value: 3000
    }
]; // 类别
var  datas = [];
category.forEach(value => {
    datas.push(value.value);
});
option = {
    backgroundColor:'#333',
    xAxis: {
        splitLine: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            show: false
        },
        axisTick: {
            show: false
        }
    },
    grid: {
        left: 80,
        top: 20// 设置条形图的边距
        right: 80,
        bottom: 20
    },
    yAxis: [{
        type: "category",
        inverse: false,
        data: category,
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        }
    }],
    series: [{
            // 内
            type: "bar",
            barWidth: 18,
            legendHoverLink: false,
            silent: true,
            itemStyle: {
                normal: {
                    barBorderRadius:[4,4,4,4],
                    color: function(params) {
                        var color;
                        if(params.dataIndex==19){
                             color = {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [{
                                        offset: 0,
                                        color: "#66b1ff" // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "#409eff" // 100% 处的颜色
                                    }
                                ]
                            }
                            }else if(params.dataIndex==18){
                            color = {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [{
                                         offset: 0,
                                        color: "#66b1ff" // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "#409eff" // 100% 处的颜色
                                    }
                                ]
                            }
                            }else if(params.dataIndex==17){
                            color = {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [{
                                         offset: 0,
                                        color: "#66b1ff" // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "#409eff" // 100% 处的颜色
                                    }
                                ]
                            }
                            }else{
                            color = {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [{
                                         offset: 0,
                                        color: "#66b1ff" // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "#409eff" // 100% 处的颜色
                                    }
                                ]
                            }
                            }
                            return color;
                    },
                }
            },
            label: {
                normal: {
                    show: true,
                    position: "left",
                    formatter: "{b}",
                    textStyle: {
                        color: "#fff",
                        fontSize: 14
                    }
                }
            },
            data: category,
            z: 1,
            animationEasing: "elasticOut"
        },
        {
            // 分隔
            type: "pictorialBar",
            itemStyle: {
                normal:{
                    color:"#333"
                }
            },
            symbolRepeat: "fixed",
            symbolMargin: 6,
            symbol: "rect",
            symbolClip: true,
            symbolSize: [221],
            symbolPosition: "start",
            symbolOffset: [1, -1],
            data: category,
            z: 2,
            animationEasing: "elasticOut"
        },
        {
            // 外边框
            type: "pictorialBar",
            symbol: "rect",
            itemStyle: {
                normal: {
                    color: "none"
                }
            },
            label: {
                normal: {
                	formatter: (params) => {
                		var text;
                        if(params.dataIndex==1){
                        	text = '{f|  '+params.data+'}';
                        }else if(params.dataIndex==2){
                        	text = '{f|  '+params.data+'}';
                        }else if(params.dataIndex==3){
                        	text = '{f|  '+params.data+'}';
                        }else{
                        	text = '{f|  '+params.data+'}';
                        }
                        return text;
    				},
    				rich:{
    					f:{
    			        	color:"#ffffff"
    			        }
    				},
    				position: 'right',
    				show: true
                }
            },
            data: datas,
            z: 0,
            animationEasing: "elasticOut"
        }
    ]
};

自动播放+底部可拖拽

Vue echart如何实现柱状图,电池图,3D柱图和3D圆柱图

 var option = {
     title: {
        text: '门禁告警数量',
        textStyle: {
            fontSize: 25,
            fontWeight: 'normal',
            color: '#fff',
        },
        x: 'center'
    },
     backgroundColor:'#323a5e',
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器,坐标轴触发有效
            type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
          }
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '14%',
          top:'16%',
          containLabel: true
        },
         legend: {
        data: ['门禁常开告警''门禁离线告警'],
        right: 10,
        top:12,
        textStyle: {
            color: "#fff"
        },
        itemWidth: 12,
        itemHeight: 10,
        // itemGap: 35
    },
        xAxis: {
          type: 'category',
          data: ['万城社区','花溪社区','人民社区','齿轮厂家属社区','融创社区','元琦林居社区','花城社区','杨中村'],
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            textStyle: {
              fontFamily: 'Microsoft YaHei'
            }
          },
        },
        yAxis: {
          type: 'value',
          max:'150',
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
          axisLabel: {}
        },
        "dataZoom": [{
          "show"true,
          "height"12,
          "xAxisIndex": [
            0
          ],
          bottom:'8%',
          "start"10,
          "end"90,
          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h69.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '110%',
          handleStyle:{
            color:"#d3dee5",
          },
          textStyle:{
            color:"#fff"},
          borderColor:"#90979c"
        }, {
          "type""inside",
          "show"true,
          "height"15,
          "start"1,
          "end"35
        }],
        series: [{
          name: '门禁常开告警',
          type: 'bar',
          barWidth: '15%',
          itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0001, [{
                    offset0,
                    color'#fccb05'
                }, {
                    offset1,
                    color'#f5804d'
                }]),
                barBorderRadius: 12,
            },
          },
          data: [1030401205090604015]
        },
        {
          name: '门禁离线告警',
          type: 'bar',
          barWidth: '15%',
          itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0001, [{
                    offset0,
                    color'#8bd46e'
                }, {
                    offset1,
                    color'#09bcb7'
                }]),
                barBorderRadius: 11,
            }
          },
          data: [54060110401007050 ,20]
        }]
      };
      var app = {
        currentIndex: -1,
      };
      setInterval(function () {
        var dataLen = option.series[0].data.length;
        // 取消之前高亮的图形
        myChart.dispatchAction({
          type'downplay',
          seriesIndex0,
          dataIndex: app.currentIndex
        });
        app.currentIndex = (app.currentIndex + 1) % dataLen;
        //console.log(app.currentIndex);
        // 高亮当前图形
        myChart.dispatchAction({
          type'highlight',
          seriesIndex0,
          dataIndex: app.currentIndex,
        });
        // 显示 tooltip
        myChart.dispatchAction({
          type'showTip',
          seriesIndex0,
          dataIndex: app.currentIndex
        });

      }, 1000);

比电池图好看一点的进度条

Vue echart如何实现柱状图,电池图,3D柱图和3D圆柱图

let backgroundColor = 'rgba(0,0,0,1)';
let chartData = [
    [0,20,3330],
    ['AAA''BBB''CCC''DDD'],
];
let getmydmc = chartData[1]; //数据点名称
let getmyd = chartData[0]; //收入金额
let getmydzd = [];
let big = 0;
getmyd.forEach((el) => {
    if (!(el === undefined || el === '' || el === 0)) {
        if (big < Number(el)) {
            big = Number(el);
        }
    } else {
        big = 100;
    }
});
for (let i = 0; i < getmyd.length; i++) {
    getmydzd.push(big * 4);
}
//计算最大值
function calMax(arr) {
    let max = 0;
    arr.forEach((el) => {
        el.forEach((el1) => {
            if (!(el1 === undefined || el1 === '' || el1 === 0)) {
                if (max < Number(el1)) {
                    max = Number(el1);
                }
            } else {
                max == 100;
            }
        });
    });
    let maxint = Math.ceil(max / 9.5);
    //不让最高的值超过最上面的刻度
    let maxval = maxint * 10;
    //让显示的刻度是整数
    return maxval;
}
const max = Math.ceil(calMax([getmyd]) / 10) * 10;
option = {
    backgroundColor: backgroundColor,
    grid: {
        left'10%',
        right'10%',
        bottom'0%',
        top'5%',
        // containLabel: true,
    },
    tooltip: {
        formatter(params) => {
            if (params.name !== '') {
                return params.name + ' : ' + getmyd[params.dataIndex];
            }
        },
        textStyle: {
            align'left',
        },
    },
    xAxis: [
        {
            type'value',
            axisLabel: {
                showfalse,
                color'#fff',
                formatterfunction (val) {
                    return val + '';
                },
                textStyle: {
                    fontSize'13',
                },
            },
            min0,
            max: max, // 计算最大值
            interval: max / 5//  平均分为5份
            splitNumber5,
            splitLine: {
                showfalse,
                lineStyle: {
                    color'#fff',
                },
            },
            axisLine: {
                showfalse,
                lineStyle: {
                    color'#fff',
                    width1,
                    opacity0.3,
                },
            },
            axisTick: {
                showfalse,
            },
        },
        {
            type'value',
            axisLabel: {
                showfalse,
            },
            min0,
            max: max, // 计算最大值
            interval: max / 10//  平均分为5份
            splitNumber10,
            splitLine: {
                showfalse,
                lineStyle: {
                    type'dashed',
                    color'#D8D8D8',
                },
            },
            axisLine: {
                showfalse,
                lineStyle: {
                    color'#fff',
                },
            },
            axisTick: {
                showfalse,
            },
        },
    ],
    yAxis: [
        {
            inversefalse,
            data: getmydmc,
            axisLabel: {
                padding: [0020, -10],
                insidetrue,
                textStyle: {
                    fontSize14,
                    fontFamily'PingFang SC',
                    fontWeight400,
                    color'#d2d2d2',
                    align'left',
                    textShadowColor'#00d6ff',
                    textShadowOffsetX0,
                    textShadowOffsetY0,
                    textShadowBlur5,
                },
                formatter'{value}\n{a|占位}',
                rich: {
                    a: {
                        color'transparent',
                        lineHeight30,
                        fontFamily'digital',
                        fontSize14,
                    },
                },
            },
            // offset: 0,
            splitLine: {
                showfalse,
            },
            axisTick: {
                showfalse,
            },
            axisLine: {
                showfalse,
            },
        },
        {
            //左侧柱状图的Y轴
            gridIndex0//y轴所在的 grid 的索引
            splitLine'none',
            axisTick'none',
            axisLine'none',
            data: getmyd,
            inversefalse,
            axisLabel: {
                showtrue,
                verticalAlign'bottom',
                align'right',
                padding: [010180],
                textStyle: {
                    color'#fff',
                    fontSize'14',
                },
                formatterfunction (value) {
                    return '{x|' + value + '}';
                    // return '{x|' + value + '}  {y|' + '%}';
                },
                rich: {
                    y: {
                        color'#3dffef',
                        fontFamily'Orbitron',
                        fontSize14,
                    },
                    x: {
                        color'#3dffef',
                        fontFamily'Orbitron',
                        fontSize14,
                    },
                },
            },
        },
    ],
    dataZoom: [
        {
            type'inside',
            showtrue,
            height15,
            start1,
            end100,
            orient'vertical',
            zlevel66,
        },
    ],
    series: [
        {
            name'值',
            type'bar',
            // barGap: '100%',
            padding10,
            // zlevel: 1,
            xAxisIndex0,
            label: {
                showfalse,
                position'right',
                textStyle: {
                    color'#fff',
                    fontSize14,
                },
            },
            itemStyle: {
                normal: {
                    borderRadius0,
                    color: {
                        colorStops: [
                            {
                                offset0,
                                color'#46B7ED'// 0% 处的颜色
                            },
                            {
                                offset1,
                                color'#48EDD3'// 100% 处的颜色
                            },
                        ],
                    },
                },
            },
            barWidth18,
            data: getmyd,
            z0,
        },
        {
            // 分隔
            type'pictorialBar',
            symbolRotate'-25',
            itemStyle: {
                normal: {
                    color'rgba(1, 12, 38, 0.4)',
                },
            },
            symbolRepeat'fixed',
            symbolMargin6,
            symbol'rect',
            symbolCliptrue,
            symbolSize: [522],
            symbolPosition'start',
            symbolOffset: [0, -2],
            data: getmyd,
            z66,
            animationEasing'elasticOut',
        },
        {
            name'背景',
            type'bar',
            barWidth24,
            barGap'-118%',
            data: getmydzd,
            itemStyle: {
                normal: {
                    color'rgba(5,59,113,0.7)',
                    borderRadius0,
                    // borderColor: 'rgba(0, 255, 236, 1)',
                    borderColornew echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset0,
                                color'#015EFE'// 0% 处的颜色
                            },
                            {
                                offset1,
                                color'#10C2E8'// 100% 处的颜色
                            },
                        ],
                        false
                    ),
                },
            },
            z: -1,
        },
        {
            type'pictorialBar',
            name'左内边框',
            symbol'rect',
            symbolSize: [322],
            symbolOffset: [0, -2],
            animationfalse,
            // symbolKeepAspect: true,
            // animationEasing: 'none',
            itemStyle: {
                normal: {
                    color'rgba(5,59,113,1)',
                },
                opacity1,
            },
            z99,
            datanew Array(getmyd.length).fill(1),
        },
    ],
};

以上是“Vue echart如何实现柱状图,电池图,3D柱图和3D圆柱图”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×