echarts实现柱状图渐变阴影及滚动点击缩放图表效果代码
代码语言:html
所属分类:图表
代码描述:echarts实现柱状图渐变阴影及滚动点击缩放图表效果代码
代码标签: echarts 柱状图 渐变 阴影 滚动 点击 缩放 图表
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.js"></script> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; var dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放']; var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220]; var yMax = 500; var dataShadow = []; for (var i = 0; i < data.length; i++) { dataShadow.push(yMax); } option = { title: { text: '特性示例:渐变色 阴影 点击缩放', subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom' }, xAxis: { data: dataAxis, axisLabel: { inside: true, textStyle: { color: '#fff' } }, axisTick: { show: false }, axisLine: { show: false }, z: 10 }, yAxis: { axisLine: { show: false }, axisTick: { show: false }, axisLabel: { textStyle: { color: '#999' } } }, dataZoom: [ { type: 'inside' } ], series: [ { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0