首页手记哪位大神有封装过Echarts制作可视化数据图表

哪位大神有封装过Echarts制作可视化数据图表

标签：

JQuery JavaScript

现在饼状图，柱状图，还有一种混合图（折现，柱状，面积混在一起）每一个单个的图都做好了，但是这样并没有达到目的，需要把这三种图表分装成一个工具，因为之前没做过封装工具的功能，有点费劲加吃力，没有思路。
求各路大神有谁用js做过这样的封装。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>雷达图</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width:550px;height:400px;"></div>
    <script type="text/javascript">
    var myChart=echarts.init(document.getElementById('main'));
    var option = {
    backgroundColor: '#c9dd22',
    title: {
        text: '自定义雷达图'
    },
    legend: {
        data: ['利润']
    },
    radar: [
        {
            indicator: [
                { text: '指标一' },
                { text: '指标二' },
                { text: '指标三' },
                { text: '指标四' },
                { text: '指标五' },
                { text: '指标六' },
                { text: '指标七' }
            ],
            center: ['50%', '50%'],//坐标位置
            radius: 120,//设置半径大小
            startAngle: 90,//指标角度
            splitNumber: 4,//圆内分割环书
            shape: 'circle',//外形为圆形，默认是直线
            name: {
                formatter:'【{value}】',
                textStyle: {
                    color:'#72ACD1'//标注字体颜色
                }
            },
            splitArea: {
                areaStyle: {
                    color: ['rgba(114, 172, 209, 0.2)',
                    'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)',
                    'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'],
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 10
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.5)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 225)'//线条颜色
                }
            }
        },

    ],
    series: [
        {
            name: '雷达图',
            type: 'radar',
            itemStyle: {
                emphasis: {
                    // color: 各异,
                    lineStyle: {
                        width: 4//鼠标移动显示线条宽度
                    }
                }
            },
            data: [
                {
                    // value: [0,0,0,0, 0,0,0],
                    value: [350, 5, 0.30, -100, 200,100,300],
                    name: '利润',
                    symbol: 'rect',
                    symbolSize: 5,//线条交点大小
                    lineStyle: {
                        normal: {
                            // type: 'dashed'//面积图形虚线
                        }
                    }
                },

            ]
        },

    ]
}
myChart.setOption(option);
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>柱形图</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>
<script type="text/javascript">
var myChart=echarts.init(document.getElementById('main'));
    //制定图表的配置项和数据
// app.title = '坐标轴刻度与标签对齐';

var option = {
    // color: ['#f444f0'], //#3398DB
    backgroundColor: '#c9dd22',
    title : {
        text: '某公司----',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line'  'shadow'
        }
    },
    legend: {
        data:['收益数']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['一', '二', '三', '四', '五', '六','七','八','九','十'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis : [
        {
            // boundaryGap: [0, '80%'],
            type : 'value'
        }
    ],
    series : [
        {
            name:'收益率',
            type:'bar',
            barWidth: '60%',
             label: {
                normal: {
                    show: true,
                    position: 'top'//柱状标示信息
                }
            },
            name:'收益率',
            data:[130, 150, 280, 310, 450, 500, 650,700,850,880]
        }
        // ,
        //  {
        //     name:'拒绝',
        //     type:'line',
        //     // smooth:true,
        //     // itemStyle: {normal: {areaStyle: {type: 'default'}}},
        //     data:[0,50,80,440,550,680,750,850,920,1200]
        // }
        // ,
        //  {
        //     name:'拒绝',
        //     type:'line',
        //     // smooth:true,
        //     // itemStyle: {normal: {areaStyle: {type: 'default'}}},
        //     data:[0,30,120,320,480,550,680,750,870,1100]
        // }
    ]
};
myChart.setOption(option);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>混搭图</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width:750px;height:400px;"></div>
    <script type="text/javascript">
    var myChart=echarts.init(document.getElementById('main'));
    //制定图表的配置项和数据
    var option={
    //标题    
    title : {
        text: '某公司销售情况',
        subtext: '纯属虚构'
    },
    //提示
    tooltip : {
        trigger: 'xAxis'
    },
    dataZoom: [
                 {
                     type: 'slider',    //支持鼠标滚轮缩放
                     start: 0,            //默认数据初始缩放范围为10%到90%
                     end: 100
                 },
                 {
                     type: 'inside',    //支持单独的滑动条缩放
                     start: 0,            //默认数据初始缩放范围为10%到90%
                     end: 100
                 }
            ],
    //图列
    legend: {
        data:['意向','预购','成交','拒绝','购买']
    },
     color:[
                   '#0eb83a',    //温度曲线颜色
                   '#fa83c6',    //湿度曲线颜色
                   '#B15BFF',    //压强图颜色
                   '#68CFE8',    //雨量图颜色
                   '#DJ832N',
                   '#FFDC35'    //风速曲线颜色
                   ],
    //工具箱
    toolbox: {
        // show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },

    calculable : true,
    //坐标轴axis
    //横轴
    xAxis : [
        {
            // type : 'category',
            // boundaryGap : true,
            // name:'年',
            data : ['2007','2008','2009','2010','2011','2012','2013','2014','2015','2016']
        }
    ],
    //纵轴
    yAxis : [
        {
            type : 'value',
            name : '水量',
            axisLabel : {
                formatter: '{value} ml'
            }
        },
        {
            type : 'value',
            name : '温度',
            // max: 100,
            // min: -25, 
            markPoint : {
                data : [
                    {type : 'max', name: '0'},
                    {type : 'min', name: '-40'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '32'}
                ]
            },
            axisLabel : {
                formatter: '{value} °C'
            }
        }
    ],
    //数据系列
    series : [
        {
            //面积图
            name:'成交',
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[100, 300, 500, 550, 620, 830, 710,370,480,899]
        },
        {
            //柱图
            name:'预购',
            type:'bar',
            yAxisIndex: 0,
            barWidth: '60%',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[180, 107, 1432, 987, 1320, 777, 888,1008,1187,1450]
        },
        {
            //折线图
            name:'意向',
            type:'line',
            symbol:'emptyrect',//空心矩形
            // smooth:true,
            // itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[20,90,120,234,601,750,950,1150,1320,1432,]
        },
        {
            name:'拒绝',
            type:'line',
            symbol:'circle',//实心圆
            // smooth:true,
            // itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[45,80,180,290,334,501,650,860,920,1350]
        },
        {
            name:'购买',
            type:'line',
            symbol:'emptydiamond',//菱形
            // smooth   :true,
            // itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[30,60,80,150,234,401,720,870,980,1220]
        },

    ]
};
myChart.setOption(option);
</script>
</body>
</html>

点击查看更多内容