数据可视化插件Echarts的使用心得与解析

 

Echarts是百度出品的,基于Canvas的一款纯JS图标库,目前已经更新到3.0版本,具有优秀的兼容性,并且免费.是目前为止我认为最好用的数据可视化工具.废话不多说,先上图.

图表上面的部分是查询条件,仅作为和后台与用户做交互用,和图表样式关系不大

以下链接是echarts 2.0 官方网站:

http://echarts.baidu.com/echarts2/index.html

以下链接是echarts 3.0 官方网站:

http://echarts.baidu.com/

官网有各种examples和各个参数的详细说明,至于选择2.0还是3.0,按项目需求来

我的项目中仅仅用到了柱状图和饼图,所以只介绍这两种.

1.Bar Chart:

上代码:(此柱状图比较特殊,是堆积柱状图,每一根柱子中包含多项数据)

var barDom = document.getElementById("staCaseBar"); //获取图标标签元素
                var barEChart = echarts.init(barDom); //初始化
                var barOption = {
                    tooltip: {  // 提示框，鼠标悬浮交互时的信息提示
                        trigger: 'axis', //触发类型，默认（'item'）数据触发，可选为：'item' | 'axis'
                        backgroundColor : 'rgba(0,0,0,0.5)', // 提示框背景色
                        axisPointer: {
                            type: 'cross'  // cross或shadow ,分别为鼠标悬浮时显示交叉线和阴影
                        },
                        borderRadius : 8,
                        padding: 10,
                        textStyle : {
                            color: 'white'  // 提示框文字颜色
                        },
                        formatter:  function (params){  // 提示框显示内容,此不详述,具体见官方文档
                            console.log(params);
                            var parStr = params[0].name;
                            $.each(params,function(i,v){
                                parStr += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
                            })
                                return parStr ;
                        }
                    },
                    legend: {  // 此项为图例显示内容,分别对应series项中的各项内容
                        x:'left',y:'top',
                        data:['行政案件','刑事案件','民事案件','经济纠纷案件','赔偿案件','其他案件']
                    },
                    calculable : true,
                    xAxis: { // x轴显示内容,我此处用的根据后台传输的动态数组
                        data: timeArr,
                        name: "时间"
                    },
                    yAxis: { // y轴内容,具体数据为series中数据
                        show: true,
                        name: "数量",
                        //splitNumber: 4,
                        max: maxNum, // y轴最大值为计算出来的数据最大值
                        type: 'value',
                        //分隔区域，默认不显示
                        splitArea: {show: true}
                    },

                    series: [ // 以下每一项均为堆积柱状图其中一项
                        {
                        name: '行政案件',
                        type: 'bar',
                        stack: '总量',
                        data: case01Arr, //每一个data均为数组,代表每个柱子中该项的数量
                        itemStyle: { normal: { color : '#0469B9' } }  // 每一项颜色不同
                        },
                        {
                            name: '刑事案件',
                            type: 'bar',
                            stack: '总量',
                            data: case02Arr,
                            itemStyle: { normal: { color : '#7ECEF3' } }
                        },
                        {
                            name: '民事案件',
                            type: 'bar',
                            stack: '总量',
                            data: case03Arr,
                            itemStyle: { normal: { color : '#199FDC' } }
                        },
                        {
                            name: '经济纠纷案件',
                            type: 'bar',
                            stack: '总量',
                            data: case04Arr,
                            itemStyle: { normal: { color : '#0DBACA'} }
                        },
                        {
                            name: '赔偿案件',
                            type: 'bar',
                            stack: '总量',
                            data: case05Arr,
                            itemStyle: { normal: { color : '#F9B552' } }
                        },
                        {
                            name: '其他案件',
                            type: 'bar',
                            stack: '总量',
                            data: case06Arr,
                            itemStyle: { normal: { color : '#CBDDE7' } }
                        },

                    ]
                };
                if (barOption && typeof barOption === "object") {
                    barEChart.setOption(barOption, true);
                }

        <!--柱状图-->
		<div class="staCharts">
			<div id="staCaseBar"></div>
		</div>

之前研究了很久,鼠标悬浮时一直显示不出提示框,网上资料也查不到原因.后来发现,html中还不能写以canvas标签作为容器,将其改为div后,才终于出现提示框,心满意足.

2.Pie Chart:

上代码:

var pieChart = echarts.init(document.getElementById(idName)); // 命中容器元素
        var pieOption = { // 开始设置参数
            backgroundColor: 'white',
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c}"
            },
            series : [
                {
                    name: '案件数量',
                    type: 'pie',
                    radius : '60%',
                    clockwise:'true',
                    startAngle:'0',
                    center: ['50%', '50%'],
                    data:pieDataArr,
                    labelLine: {
                        normal:{show:false}
                    },
                    label: {
                        normal:{show:false}
                    }
                }
            ]
        };
        pieChart.setOption(pieOption);

<div id="adminPieChart"></div>

饼图比较简单,没有设置复杂的参数.此处也要注意,用div不用canvas

 

总结:

此项目为本人第一次使用数据可视化插件,对echarts非常满意.当然,使用到的功能和参数也仅仅是冰山一角,echarts的强大功能绝非仅此而已.

欢迎有识之士共同探讨,共同进步!

转载于:https://my.oschina.net/u/3317346/blog/1163004