序言
最近一直在赶项目，遇到过很多问题，也找到了一些解决的方法，现在准备静下心来整理一下这段时间的成果，完善代码，把遇到的问题和解决方法记下来，备忘。
前几天做统计页面的时候，需求为对在线/离线人员统计，对不同类别统计，需要显示统计信息并能单击某一类别触发事件。
用到的插件当然是强大的echarts了。这里为官方文档案例，最全面的还是官方文档啦。
html
<!-- 统计表 --> <div class="chart" id="leaderchart"></div>
初始化
1 //统计 2 //下面代码中的this和that都是我本地工程里面用的，可以自己定义变量var mychart来代替this.mychart 3 this.mychart = echarts.init(document.getElementById(‘leaderchart‘), "shine");//初始化并绑定html页面中的div显示统计图形，第二个参数为主题
柱状图
效果：
代码：
1 var option = {
2 title: {
3 subtext: ‘人员总数：‘ + result.totalUser //标题显示总数
4 },
5 tooltip: {//设置提示
6 trigger: ‘item‘,
7 formatter: "{b}:{c}", //提示文本为x轴字段：值
8 textStyle: { //提示文本的样式
9 color: ‘#fff‘,
10 fontsize: 12
11 }
12 },
13 xAxis: [ //设置x轴显示字段
14 {
15 type: "category",
16 data: [‘在线人员‘, ‘离线人员‘]
17 }
18 ],
19 yAxis: [ //设置y轴显示字段
20 {
21 type: "value",
22 }
23 ],
24 series: [{
25 type: ‘bar‘,//统计图类型
26 barWidth: 30,//柱状的宽
27 itemStyle: {
28 normal: { //默认显示样式
29 color: function (params) { //按照顺序循环显示颜色
30 var colorList = [‘rgb(230,182,0)‘, ‘rgb(43,130,29)‘];
31 return colorList[params.dataIndex];
32 },
33 label: { //柱状上部显示value值
34 show: true,
35 position: ‘top‘,
36 formatter: function (params) {
37 return params.value;
38 }
39 }
40 },
41 emphasis: { //鼠标移入样式
42 shadowBlur: 10,
43 shadowOffsetX: 0,
44 shadowColor: ‘rgba(0,0,0,0.4)‘
45 }
46 },
47 data: [result.total, Outline],//绑定‘在线人员‘, ‘离线人员‘数据，即y轴的值
48 // markPoint: {//设置标记点，这里没用到就不显示了。
49 // data: [
50 // { name: ‘在线‘, xAxis: ‘在线人员‘, yAxis: result.total },
51 // { name: ‘在线‘, xAxis: ‘离线人员‘, yAxis: Outline }
52 // ]
53 // }
54 }]
55 };
56 this.mychart.setOption(option);//将配置应用到统计图形中
formatter在官网上的定义
饼状图
效果：
代码：
1 var option = {
2 tooltip: { //提示信息
3 trigger: ‘item‘,
4 formatter: function (params) { //设置提示信息的内容
5 return ‘<p>占比：‘ + + params.percent + ‘%</p><p>面积：‘ + params.data.value + ‘</p><p>项目数量：‘ + params.data.count;
6 },
7 textStyle: { //设置提示信息的样式
8 color: ‘#fff‘,
9 fontsize: 12
10 }
11 },
12 legend: { //图例
13 orient: ‘vertical‘,
14 x: ‘left‘,
15 itemWidth: 10, // 图例图形宽度
16 itemHeight: 8, // 图例图形高度
17 data: infos //绑定要显示的统计数据，为数组
18 },
19 series: [{
20 type: ‘pie‘,//设置统计图的类型
21 radius: "55%",//设置饼状图的大小
22 center: [‘60%‘, ‘50%‘],//设置饼状图的位置
23 data: infos //绑定要显示的统计数据，为数组
24 }]
25 };
26 this.mychart.setOption(option); //将配置应用到统计图形中
统计的数据
1 //将要传入的参数都定义到里面，name和value为统计的主要参数，其他用作点击事件需要传入的参数，根据自己需要添加。
2 var infos = [];
3 var item = {
4 name: mc,//云城区
5 value: pros[i].sum_acreage,//面积值
6 count: pros[i].pro_count,//数量
7 dm: dm,
8 section: pros[i].pro_section || pros[i].pro_use_type,
9 type: statisticType
10 };
11 infos.push(item);
注册点击事件
3 this.mychart.on(‘click‘, function (params) {//为统计图形添加点击事件
4 if (params.seriesType == "pie") {//当统计图为饼状图的时候
5 var name = params.name;
6 var data = params.data;
7 that.getProInfo(data.type, data.section, data.dm);//调用的方法函数
8 }
9 else if (params.seriesType == "bar") {
10 var name = params.name;//云城区
11 // var date = $("#dateperson").val();
12 switch (name) {
13 case "在线人员":
14 that.getPersonLeader(1);//调用的方法函数
15 break;
16 case "离线人员":
17 that.getPersonLeader(0);//调用的方法函数
18 break;
19 case "有日志":
20 that.getProfileInfo(1);//调用的方法函数
21 break;
22 case "无日志":
23 that.getProfileInfo(0);//调用的方法函数
24 break;
25 }
26 }
27 });
官网上params的定义
实现整个统计图功能使用的代码和知识点差不多就为以上所述，官网上有很多详细的解释，可以多研究参考。
时间： 2024-08-28 13:51:29