Echarts横向的柱状图

1、步骤：
   1)、封装Echarts折线图方法registerFunnelChart(),提取出公共的部分；
   2)、AJax获取后台数据传参至Echarts公共方法；
   3)、模拟后台获取的json数据；
   4)、给dayComment()方法值开始执行。

2、效果

3、代码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts横向的柱状图</title><script src="http://code.jquery.com/jquery-1.4.1.min.js"></script><!-- 引入 echarts.js --><script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id='consume_y_bar' style="width:600px;height:400px;margin-left:20px;"> </div>
</body>
</html>
<script type="text/javascript">/** @todo 加载echarts方法* @url:异步请求路径* @chartId:请求的echart的id* @title:标题* @legend_name:图例名*/function dayComment(url,chartId, legend_name) {/*$.ajax({//Ajax请求你要展现的数据url :url,type : 'post',cache : false,dataType : 'json',async:false,    //改为同步data : { },   //查看方式success : function(data) {chartTool.registerFunnelChart( chartId,data.textname,  legend_name, data.yAxisData, data.seriesData);},error : function() {alert('服务器异常！')}});*///Ajax模拟数据前台暂时写死var data = getStaticJsonData();chartTool.registerFunnelChart( chartId,data.textname, legend_name, data.yAxisData, data.seriesData);}var chartTool = {/*** @todo Echarts 横向柱状图* @param chartId  插件的div的ID* @param textname  标题名* @param legendData 图例名字* @param yAxisData  Y轴的数据* @param seriesData 实际展现的数据*/registerFunnelChart : function( chartId, textname, legendData, yAxisData, seriesData ){var myChart = echarts.init(document.getElementById( chartId ));var option = {color:['#3398DB'],title: {text:textname,   // '注册转化漏斗(总体转化率10%)',left:'center'},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {data: [legendData], //['用户数']top:30,},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'value',boundaryGap: [0, 0.01]},yAxis: {type: 'category',data: yAxisData, //['后续操作(3%)','完成注册(98%)','点击注册']},series: [{name: legendData,    //'用户数',barWidth: 30,     //设置柱子宽度type: 'bar',data: seriesData, //[ 104970, 131744, 630230]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption( option );},};//模拟AJax请求获取返回的json数据function getStaticJsonData() {var data = '{"textname":"注册转化漏斗(总体转化率40%)","yAxisData":["已消费(50%)","已登录(80%)","已注册"],"seriesData":[20,40,50]}';data = eval('(' + data + ')');return data;}dayComment('Ajax请求的路径', 'consume_y_bar', '用户数');
</script>

Echarts横向的柱状图相关推荐

echarts横向渐变柱状图，顶部带scatter,effectScatter,背景色
1.echarts横向渐变柱状图,顶部带scatter,effectScatter,背景色 (代码和效果如下) <template> <div class="chart&q ...
echarts横向左右对比柱状图
需求业务需求横向对比柱状图,左边从左到右,右边从右到左. 效果图代码 var myChart = echarts.init(document.getElementById('chart-panel ...
echarts 折线图 + 柱状图
Echarts 常用各类图表模板配置注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项: 以下代码都可以复制到 Echarts 官网,直接预览: 图标模板目录 Echarts ...
echarts怎么实现立体柱状图_在vue项目中使用echarts制作3d柱状图
在上一篇文章我们讲到构建项目,这篇文章,我们就来讲解一下,在vue项目中使用echarts制作3d柱状图. 还请看我娓娓写来. 1.第一步当然还是进入你所在项目的文件夹. 2.第二步使用npm安装你所 ...
Echarts 3D立体柱状图(源码+例图)
Echarts 3D立体柱状图,3D长方体柱状图,直接cope源码可用(源码+例图) 废话不多说,直接上代码!!! // HTML 代码 <div id="litiBar" ...
echarts实现排名柱状图
通过echarts实现排名柱状图,效果图如下,下方是完整代码,可以直接在echarts示例中运行.在线运行 let ydata = ['上海', '北京', '深圳', '天津', '河南', '新疆 ...
Echarts实现堆叠柱状图+折线图
Echarts实现堆叠柱状图+折线图,以便后续使用时复制 //堆疊Bar圖+折線圖 option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: { ...
Echarts绘制地图柱状图
场景需求:在使用echarts渲染的时候,有需求在页面中实现在echarts地图上叠加柱状图或者折线图,饼图等场景:目前地图上叠加的代码是甘肃省的json文件,也可以更换成全国的或者其他省份的,有需要 ...
echarts——横向柱状图
功能描述全屏横向柱状图从小到大排序,每次显示5条,每3秒切换循环显示鼠标移入停止切换,鼠标移出继续切换柱状图组件源码 <template><div class="w ...
echarts横向倒叙柱状图
option = {backgroundColor: '#32374d',title: [{text: '能力进度条',x: '50%',y: 30,textAlign: 'center',textS ...

Echarts横向的柱状图

Echarts横向的柱状图相关推荐

最新文章

热门文章