【绘图杂记18】Echarts 柱形图（带标记）

最新推荐文章于 2024-05-21 20:58:30 发布

卖山楂啦prss

最新推荐文章于 2024-05-21 20:58:30 发布

阅读量1.5k

点赞数 2

分类专栏：数据可视化

本文链接：https://blog.csdn.net/qq_42374697/article/details/113731771

版权

数据可视化专栏收录该内容

28 篇文章 26 订阅

订阅专栏

这段代码展示了如何利用ECharts库创建一个带有自定义图案和边框的柱状图，并结合线性图进行展示。每个柱子的颜色来源于预定义的颜色数组，通过canvas生成特定图案并用作柱状图的填充。此外，还配置了数据视图、保存为图片以及工具箱等功能，提供了最大值、最小值和平均值的标记。

摘要由CSDN通过智能技术生成

在这里插入图片描述

const colors = ['#f5222d', '#FF33CC', '#fa8c16', '#a0d911', '#1890ff', '#2f54eb', '#fadb14']
let barData = [280, 162, 223, 270, 180, 340, 352];
data = barData.map((it, i) => {
    const dataURL = getCanvasImgColorUrl(colors[i])
    const PatternImgA = new Image()
    PatternImgA.src = dataURL

    return { // 处理每一个柱子 是否加边框
        value: it,
        itemStyle: {
            color: {
                image: PatternImgA,
                repeat: 'repeat'
            },
            barBorderColor: colors[i],
            barBorderWidth: 1,
            barBorderRadius: 0,
            borderType: 'solid'
        }
    }
})


option = {
    toolbox: {
            show: true,
            feature: {
                dataView: {show:true},
                saveAsImage: {
                    //excludeComponents :['toolbox'],
                    pixelRatio: 5
                }
            }
},
    xAxis: {
        data: ['江北区', '渝中区', '渝北区', '沙坪坝区', '南岸区', '巴南区', '九龙坡区'],
        axisLabel: {
        margin: 14,

        fontSize: 15,

        color: "#333"
      },
        
    },
    yAxis: {
    axisTick: {
      show: true
    },
    axisLine: {
      formatter: '{value}-100',  
      show:true
    },    
    axisLabel: {
        margin: 14,

        fontSize: 12,

        color: "#333"
      },    
    },
    series: [{
        type: 'bar',
        barWidth: '50%',
        data: data,
        
        markPoint: {
            
            label:{
            show:true
            },
            itemStyle:{
              color:'#FF9999'  
            },
            data: [
             {name: "江北区", value: 9},
            { type: 'max', name: '最大值' }, 
            { type: 'min', name: '最小值' }] },
        markLine: { data: [{ type: 'average', name: '平均值' }] }
    },
     {
        data:  [280, 162, 223, 270, 180, 340, 352],
        type: 'line',
        smooth: true,
        name: '折线图',
        symbol: 'none',
        showSymbol: false,
        itemStyle: {
            normal: {
                borderWidth: 3,
                //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位
                color: new echarts.graphic.LinearGradient(
                    1,
                    0,
                    0,
                    0,
                    [{
                            offset: 0,
                            color: '#F9027E'
                        },
                        {
                            offset: 0.5,
                            color: '#F9027A'
                        },
                        {
                            offset: 1,
                            color: '#744DFE'
                        }
                    ]
                )
            }
        },
        lineStyle: {
            width: 5,
            shadowColor: 'rgba(0, 0, 0, 0.3)',
            shadowOffsetY: 10,
            shadowBlur: 10
        },
       
    },]
};

function getCanvasImgColorUrl(color) {
    const lineBlock = document.createElement('canvas')
    const cxt = lineBlock.getContext('2d')
    lineBlock.width = 50
    lineBlock.height = 50

    cxt.beginPath()
    cxt.moveTo(95, 0)
    cxt.lineTo(0, 95)

    cxt.moveTo(90, 0)
    cxt.lineTo(0, 90)

    cxt.moveTo(85, 0)
    cxt.lineTo(0, 85)

    cxt.moveTo(80, 0)
    cxt.lineTo(0, 80)

    cxt.moveTo(75, 0)
    cxt.lineTo(0, 75)

    cxt.moveTo(70, 0)
    cxt.lineTo(0, 70)

    cxt.moveTo(65, 0)
    cxt.lineTo(0, 65)

    cxt.moveTo(60, 0)
    cxt.lineTo(0, 60)

    cxt.moveTo(55, 0)
    cxt.lineTo(0, 55)

    cxt.moveTo(50, 0)
    cxt.lineTo(0, 50)

    cxt.moveTo(45, 0)
    cxt.lineTo(0, 45)

    cxt.moveTo(40, 0)
    cxt.lineTo(0, 40)

    cxt.moveTo(35, 0)
    cxt.lineTo(0, 35)

    cxt.moveTo(30, 0)
    cxt.lineTo(0, 30)

    cxt.moveTo(25, 0)
    cxt.lineTo(0, 25)

    cxt.moveTo(20, 0)
    cxt.lineTo(0, 20)

    cxt.moveTo(15, 0)
    cxt.lineTo(0, 15)

    cxt.moveTo(10, 0)
    cxt.lineTo(0, 10)

    cxt.moveTo(5, 0)
    cxt.lineTo(0, 5)
    cxt.strokeStyle = color
    cxt.stroke();
    cxt.fillStyle = 'rgba(255,255,255,0)'
    cxt.fillRect(0, 0, 100, 100)

    const dataURL = lineBlock.toDataURL('image/png', 1)

    return dataURL
}