echarts实现多个柱状图聚合展示效果代码
代码语言:html
所属分类:图表
代码描述:echarts实现多个柱状图聚合展示效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #000; } a:link, a:visited { color: #4682b4; } a:hover { color: #4169e1; } #main { width: 1000px; height: 800px; border: 1px solid #ccc; padding: 10px; } </style> </head> <body > <div id="main"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.5.1.1.js"></script> <script > var myChart = echarts.init(document.getElementById('main')); myChart.setOption({ title: { text: '2010-2013 Chinese urban residents per capita household consumption (Yuan)', subtext: 'Data from the National Bureau of Statistics', sublink: 'http://bfw.wiki' }, tooltip: { trigger: 'axis', backgroundColor: 'rgba(255,255,255,0.7)', axisPointer: { type: 'shadow' }, formatter: function(params) { // for text color var colorList = [ '#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed', '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0']; var color = colorList[params[0].dataIndex]; var res = '<div style="color:' + color + '">'; res += '<strong>' + params[0].name + 'Consumption (Yuan)</strong>' for (var i = 0, l = params.length; i < l; i++) { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0