Echarts图表插件

目录

1.Echarts简介

2.常用图表的开源网站

二、常用的图表的代码函数

1.柱状图

2.饼状图

---

1.Echarts简介

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器

    ECharts  提供了常规的折线图、 柱状图、 散点图、 饼图、 K线图，用于统计的 盒形
图 ，用于地理数据可视化的 地图、 热力图、 线图，用于关系数据可视化的 关系
图 、 treemap、 旭日图，多维数据可视化的 平行坐标，还有用于 BI 的漏斗图， 仪表盘，
并且支持图与图之间的混搭

---

2.常用图表的开源网站

Echarts官网  ： https://echarts.apache.org/zh/index.html

ISQQW（ECharts Demo集）：EChartsDemo集

---

二、常用的图表的代码函数

1.柱状图

代码如下（示例）：

通过盒子显示
<div class="modal fade" id="modal_user_bing" role="dialog" aria-labelledby="modal_user_import" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-body">
					<div id="bing" style="width: 600px;height: 400px;"></div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>

		</div>
	</div>

js函数

点击按钮通过调用js函数进行渲染
   //柱状图
            $("#btn_echar").click(function(){
         //通过局部刷新技术获取后台数据
                $.ajax({
                    url:"sexnum.htm",
                    dataType:"json",
                    type:"post",
                    success:function(res){
                        if(res.success){
                            //通过循环设置数据
							var list = res.list;
							var xingb =[];
							var num =[];
                            for (var i = 0; i < list.length; i++) {
								xingb[i]=list[i].sex;
								num[i]=list[i].num;
                            }
                            //通过id寻找到要渲染的对象
                            var chartDom = document.getElementById('main');
                            var myChart = echarts.init(chartDom);
                            var option;
// 指定图表的配置项和数据
                            option = {
                                xAxis: {
                                    type: 'category',
                                    data: xingb
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [
                                    {
                                        data: num,
                                        type: 'bar'
                                    }
                                ]
                            };
                            option && myChart.setOption(option);
                            $('#modal_user_echar').modal('show');
                        }else{
                            $("#select_message").text(res.errorMsg);
                            $("#alertmod_table_user_mod").show();
                        }
                    }
                });


            });

2.饼状图

代码如下（示例）：

<div class="modal fade" id="modal_user_bing" role="dialog" aria-labelledby="modal_user_import" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-body">
					<div id="bing" style="width: 600px;height: 400px;"></div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>

		</div>
	</div>
 

js函数

//饼状图
            $("#btn_bing").click(function(){
                //通过局部刷新技术获取后台数据
                $.ajax({
                    url:"sexnum.htm",
                    dataType:"json",
                    type:"post",
                    success:function(res){
                        if(res.success){
                            //通过循环设置数据
                            var list = res.list;
                            var byte=[];
                            for (var i = 0; i < list.length; i++) {
								byte[i]={value:list[i].num,name:list[i].sex};
                            }
                            //通过id寻找到要渲染的对象
                            var chartDom = document.getElementById('bing');
                            var myChart = echarts.init(chartDom);
                            var option;

                            option = {
                                tooltip: {
                                    trigger: 'item'
                                },
                                legend: {
                                    top: '5%',
                                    left: 'center'
                                },
                                series: [
                                    {
                                        name: 'Access From',
                                        type: 'pie',
                                        radius: ['40%', '70%'],
                                        avoidLabelOverlap: false,
                                        itemStyle: {
                                            borderRadius: 10,
                                            borderColor: '#fff',
                                            borderWidth: 2
                                        },
                                        label: {
                                            show: false,
                                            position: 'center'
                                        },
                                        emphasis: {
                                            label: {
                                                show: true,
                                                fontSize: '40',
                                                fontWeight: 'bold'
                                            }
                                        },
                                        labelLine: {
                                            show: false
                                        },
                                        data: byte
                                    }
                                ]
                            };
                            option && myChart.setOption(option);

                            $('#modal_user_bing').modal('show');
                        }else{
                            $("#select_message").text(res.errorMsg);
                            $("#alertmod_table_user_mod").show();
                        }
                    }
                });

            });

不是特别会写前端，只是分享一下