Question

echarts漏斗图label左对齐如何实现

我在label中配置align不生效{ name: '漏斗图', type: 'funnel', width: '40%', height: '45%', left: '5%', top: '50%', label: { normal: { position: 'left', align: 'left' } }, data:[ {value: 60, name:'访问'}, {value: 30, name:'咨询'}, {value: 10, name:'订单'}, {value: 80, name:'点击'}, {value: 100, name:'展现'} ] }

Answer 1

你这个实现了吗 bdp的这个转化率漏斗图 有没有相关demo参考一下

Answer 2

1、拷贝出两个js文件：esl.js 和echarts.js ；
2、准备一个html页面进行图表容器配备和模块化加载js和创建图表
1）、引入esl.js文件

1

<script src="../js/echarts/esl.js" type="text/javascript"></script>

之所以要引入esl.js 文件，因为它内部封装了很多模块化加载js文件和创建图表的回调函数方法。
2）、准备图表的装载容器
<div id="funnel_a" style="height: 400px; width: 800px; border: 1px solid #ccc; padding: 10px;"></div>

3）、采用esl.js文件内的方法模块化加载漏斗图所需的库且在回调函数内创建漏斗图。

// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
require.config({
/* paths: {
echarts: '../js/echarts', //echarts.js所在的路径
'echarts/chart/funnel': '../js/echarts'
} */
packages:[{
name:'echarts',
location:'../js/echarts',
main:'echarts'
},{
name:'zrender',
location:'../js/zrender',//zrender与echarts在同一级目录
main:'zrender'
}
]