一、原理

使用symbol属性，自己从图标库找到自己喜欢的图标，使用’image://路径‘ 的形式实现该功能

二、这是我的小栗子

三、直接上代码，解释都在注释里

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="echarts.js的路径"></script>
</head>
<body>
<div id="main" style="height:600px"></div>
</body>
<script>var myChart;myChart = echarts.init(document.getElementById('main'));myChart.setOption({title: {text: '各省用车数量',//到容器左边的距离left: '70%',//字体颜色textStyle: {color: 'red'}},//背景颜色，还可以将背景设置为图片backgroundColor: '#101a3c',xAxis: {//类似上面那个，可以自己调调看看啥效果left: 10,//一些分割线、轴线之类的、先不让他们显示splitLine: {show: false},axisLine: {show: false},axisLabel: {show: false},axisTick: {show: false}},yAxis: [{//类目轴，这里跟他没关系，不管他type: 'category',//决定是否是反向坐标轴。 inverse: false,data: ['A','B','C','D','E'],axisLine: {show: false},axisTick: {show: false},axisLabel: {//图形最左侧与y轴文字的距离margin: 4,textStyle: {color: '#fff',fontSize: 16.25}}},],series: [{type: 'pictorialBar',left: '5%',//这里就很重点了 格式为   'image://图标路径',symbol: 'image://images/a.png',//这里的属性都可以自己改改试试，很容易理解、大小，间距之类的symbolRepeat: true,symbolMargin: '10%',symbolClip: 'true',symbolSize: 22,symbolPosition: 'start',label: {normal: {show: true,position: 'insideRight',offset: [40, 0],color: '#fff',formatter: function(params) {return params.value;}}},symbolBoundingData: 10000,data: [11233, 23212, 21267, 18211, 1111]}]});
</script>
<script>
</script>
</html>

echarts自定义柱状图柱体形状相关推荐

echarts设置柱状图柱体渐变色
渐变色使用的是 ==> echarts内置的渐变色生成器 echarts.graphic.LinearGradient 更多相关文档也可以自己所搜看看~ series中配置: series: [ ...
ECharts（三）：柱状图柱体颜色渐变（每个柱体不同渐变色）
前提: 会简单的绘制柱状图主要内容: 渐变的主要使用在https://efe.baidu.com/blog/echarts-3.2.0/中有介绍到: itemStyle: { normal: ...
echarts自定义图表颜色，柱状图/饼图自定义渐变色
echarts自定义图表颜色,自定义渐变色柱状图: 单色: 原先图表的颜色配置代码: series: {type: "bar",barWidth: "60" ...
vue组件-echarts地图显示柱状图并给柱状图添加点击事件（支持自定义地图）
vue组件-echarts地图显示柱状图并给柱状图添加点击事件(支持自定义地图) 效果如下所示: 参考文档: 这是参考的文档起因: 最近有朋友有需求需要用echarts,在地图上显示柱状图,并添加点 ...
Echarts自定义折线图例,增加选中功能
用Echarts图表开发,原本的Echarts图例不一定能满足我们的视觉要求. 下面是Echarts 折线图自定义图例,图例checked选中,相应的折线线条会随之checked,其余未选中的图例对应 ...
vue使用Echarts画柱状图
目录 1 引入Echarts 1.1 安装 1.2 引入 2 基本柱状图 3 多列柱状图 4 柱状图样式设置 4.1 柱条样式 4.2 柱条间距 5 动态排序柱状图 6 总结 1 引入Echarts ...
echarts rich设置动态图片/动态数据；echarts 人均收入柱状图 window系统显示不出国旗；echarts动态rich
一.echarts 人均收入柱状图window系统显示不出国旗问题分析 1.如下图所示:该柱状图在window下面只显示emoji 字符,能不能转化完全看系统支不支持 2.图中的国家标识是以emoji ...
echarts，柱状图配置,legend
,echarts使用: 一.鼠标悬停时不显示文字设置: option = { tooltip: { show:false, }, 二.鼠标悬停时扇形不高亮: series: [{hoverAnimat ...
html中legend样式,echarts自定义图例legend文字和样式
话不多说,先上效果图. 要完成这个图并不难,主要是下面那个图例比较难,需要定制. 让我们从官方文档找找思路,官方文档关于legend.formatter是这样的:链接在这难点在于: 1.这里的图例文 ...

echarts自定义柱状图柱体形状

一、原理

二、这是我的小栗子

三、直接上代码，解释都在注释里

echarts自定义柱状图柱体形状相关推荐

最新文章

热门文章