ECharts 使用实例

<div id="main" style="height:400px;"></div>
<script src="./js/echarts.js"></script>
<script type="text/javascript">
    // 路径配置
    require.config({
        paths: {
            echarts: './js/dist'
        }
    });

    // 使用
    require(
            [
                'echarts',
                'echarts/chart/funnel' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main'));

                var option = {
                    title : {
                        text: '漏斗图',
                        subtext: '纯属虚构'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} {b} : {c}%"
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    legend: {
                        data : ['展现','点击','访问','咨询','订单']
                    },
                    calculable : true,
                    series : [
                        {
                            name:'漏斗图',
                            type:'funnel',
                            x: '10%',
                            y: 60,
                            //x2: 80,
                            y2: 60,
                            width: '80%',
                            // height: {totalHeight} - y - y2,
                            min: 0,
                            max: 100,
                            minSize: '0%',
                            maxSize: '100%',
                            sort : 'descending', // 'ascending', 'descending'
                            gap : 10,
                            itemStyle: {
                                normal: {
                                    // color: 各异,
                                    borderColor: '#fff',
                                    borderWidth: 1,
                                    label: {
                                        show: true,
                                        position: 'inside'
                                        // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
                                    },
                                    labelLine: {
                                        show: false,
                                        length: 10,
                                        lineStyle: {
                                            // color: 各异,
                                            width: 1,
                                            type: 'solid'
                                        }
                                    }
                                },
                                emphasis: {
                                    // color: 各异,
                                    borderColor: 'blue',
                                    borderWidth: 5,
                                    label: {
                                        show: true,
                                        formatter: '{b}:{c}%',
                                        textStyle:{
                                            fontSize:20
                                        }
                                    },
                                    labelLine: {
                                        show: true
                                    }
                                }
                            },
                            data:[
                                {value:60, name:'访问'},
                                {value:40, name:'咨询'},
                                {value:20, name:'订单'},
                                {value:80, name:'点击'},
                                {value:100, name:'展现'}
                            ]
                        }
                    ]
                };
                // 为echarts对象加载数据
                myChart.setOption(option);
            }
    );
</script>

　　需要用到的是echarts.js文件和dist文件夹

转载于:https://www.cnblogs.com/Caoxt/p/5454862.html