172Echarts - 象形柱图（Dotted bar）

效果图

源代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="js/echarts.min.js"></script><script src="js/jquery-1.11.0.min.js"></script><script src="dist/extension/dataTool.js"></script></head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 1024px;height:768px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));var option;// Generate datavar category = [];var dottedBase = +new Date();var lineData = [];var barData = [];for(var i = 0; i < 20; i++) {var date = new Date(dottedBase += 3600 * 24 * 1000);category.push([date.getFullYear(),date.getMonth() + 1,date.getDate()].join('-'));var b = Math.random() * 200;var d = Math.random() * 200;barData.push(b)lineData.push(d + b);}// optionoption = {backgroundColor: '#0f375f',tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {data: ['line', 'bar'],textStyle: {color: '#ccc'}},xAxis: {data: category,axisLine: {lineStyle: {color: '#ccc'}}},yAxis: {splitLine: {show: false},axisLine: {lineStyle: {color: '#ccc'}}},series: [{name: 'line',type: 'line',smooth: true,showAllSymbol: true,symbol: 'emptyCircle',symbolSize: 15,data: lineData}, {name: 'bar',type: 'bar',barWidth: 10,itemStyle: {normal: {barBorderRadius: 5,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#14c8d4'},{offset: 1,color: '#43eec6'}])}},data: barData}, {name: 'line',type: 'bar',barGap: '-100%',barWidth: 10,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(20,200,212,0.5)'},{offset: 0.2,color: 'rgba(20,200,212,0.2)'},{offset: 1,color: 'rgba(20,200,212,0)'}])}},z: -12,data: lineData}, {name: 'dotted',type: 'pictorialBar',symbol: 'rect',itemStyle: {normal: {color: '#0f375f'}},symbolRepeat: true,symbolSize: [12, 4],symbolMargin: 1,z: -10,data: lineData}]};myChart.setOption(option);</script></body></html>

172Echarts - 象形柱图（Dotted bar）相关推荐

echarts 柱状图圆柱_ECharts象形柱图
象形柱图在 ECharts 系列中使用series[i]-pictorialBar表示,它利用图片和形状表现数据,具体来说它既可以用图形的长宽变形表现数据,也可以用图形的个数.甚至是图形的颜色.透明度 ...
echarts象形柱图整体颜色渐变
@独孤求败12138 象形柱图整体颜色渐变 echarts中的象形柱图颜色渐变只能局部内部渐变,但是我想要实现整体渐变,怎么做呢?经过我大量的搜索和官方文档及API的研究,好像并不提供这一功能,那只能 ...
Echarts 自定义象形柱图Spirits
** Echarts 自定义象形柱图Spirits 效果封装的组件,使用时可直接换spirit与spirit1改变图片 ** //外部调用方法 <echarts2 class="pe ...
迪赛智慧数——柱状图（象形柱图）：水果VC含量排行榜
效果图水果和蔬菜一样都含有丰富的维生素,我们人体如果缺少了某样维生素,补充的方法最好是从天然食物中摄取,吃水果是最好的选择,水果里面富含丰富的维生素C.维生素B族.维生素E等.下面是给大家整理的富含 ...
echarts分段式的象形柱图
最近做项目UI那边那边提了个比较少见的需求,如图: 我一开始想到的自然是用element ui的进度条来做,但找了许久都没找到这种的样式效果. 于是考虑用柱状图,如果这三个数据只用一个柱状图自然很难实 ...
从繁到简so easy，象形柱图尽显数据可视化直观、炫酷本色
一提到数据可视化.excel数据生成图表.数据可视化处理等等,大家第一时间想到的是饼图.折线图.柱形图等,有那么一个组件它一直低调的存在着,但却是所有组件中对数据的呈现最形象.最直观的,它就是象形柱图 ...
echarts 象形柱图pictorialBar
象形柱图可以被想象为是个柱状图,但是柱状图的柱子并不显示,这些柱子称为基准柱,根据基准柱来定位和显示各种象形图形1.配置datadata:[{value:n,symbol:'circle', 自定义图 ...
echarts象形柱图自定义样式（类似柱状图）
象形柱图是可以设置各种具象图形元素(如图片.SVG PathData 等)的柱状图,往往用在信息图中,用于有至少一个类目轴或时间轴的直角坐标系上. 先上一个简单的效果: 其实实现思路主要在于:绘制具有 ...
特殊的象形柱图echarts
效果图 html <!DOCTYPE html> <html> <head><meta charset="UTF-8"><ti ...

172Echarts - 象形柱图（Dotted bar）

效果图

源代码

172Echarts - 象形柱图（Dotted bar）相关推荐

最新文章

热门文章