Echarts实战案例代码(9):图表纹理填充的解决方案(柱图为例)

简介: Echarts实战案例代码(9):图表纹理填充的解决方案(柱图为例)


一、设置base64图片;

var piePatternSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAABECAIAAABVrR+cAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjdDQUQ5QUY4NzhBMDExRUE5NjFCQzgxOEMwMzU0OTlFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjdDQUQ5QUY5NzhBMDExRUE5NjFCQzgxOEMwMzU0OTlFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6N0NBRDlBRjY3OEEwMTFFQTk2MUJDODE4QzAzNTQ5OUUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6N0NBRDlBRjc3OEEwMTFFQTk2MUJDODE4QzAzNTQ5OUUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4iVig4AAAeM0lEQVR42kSb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';
var piePatternImg = new Image();
piePatternImg.src = piePatternSrc;

二、设置option;

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        label:{
            show:true,
            position:"top",
        },
        itemStyle:{
            barBorderRadius:[20,20,0,0,0],
           color: {
            image: piePatternImg,
            repeat: 'repeat'
        }
        }
    }]
};

三、重点代码:

itemStyle:{
            barBorderRadius:[20,20,0,0,0],
           color: {
            image: piePatternImg,
            repeat: 'repeat'
        }


Done!

相关文章
|
22天前
|
数据可视化 JavaScript 前端开发
Echarts是一个开源的JavaScript可视化库,用于创建各种类型的图表
Echarts是JavaScript的开源可视化库,Python通过Pyecharts库可调用它来绘制图表。示例展示了如何用Pyecharts创建柱状图:定义图表对象,设置标题和坐标轴,添加X轴、Y轴数据,最后渲染展示。Pyecharts还支持折线图、散点图、饼图等多种图表类型,更多详情可查阅官方文档。
37 0
|
22天前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
36 0
|
22天前
|
存储
vue2、vue3分别配置echarts多图表的同步缩放(二)
vue2、vue3分别配置echarts多图表的同步缩放
21 0
|
22天前
|
API
vue2、vue3分别配置echarts多图表的同步缩放(一)
vue2、vue3分别配置echarts多图表的同步缩放
26 0
|
22天前
|
容器
echarts图表怎样实现刷新功能?
echarts图表怎样实现刷新功能?
|
22天前
|
数据可视化
echarts图表坐标轴数据标签添加下划线
echarts图表坐标轴数据标签添加下划线
81 0
|
22天前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
81 2
|
22天前
echarts图表
echarts图表
|
22天前
|
JavaScript
如何在vue添加echarts图表
如何在vue添加echarts图表
23 0
|
22天前
|
SQL JavaScript 分布式数据库
使用Vue+ ECharts进行动态图表展示
Vue是一个用于构建用户界面的渐进式JavaScript框架,可以轻松构建单页面应用程序(SPA)。ECharts是一个基于JavaScript的数据可视化库,可以通过简单的配置实现各种图表的展示和交互。
109 0