公司前端不够用了,就用Unity帮忙做的WebGL网页大屏展示
Unity大屏化展示图表 ,包括饼状图、折线图、柱状图等很多好东西。
使用插件:XCharts
GitHub:https://github.com/monitor1394/unity-ugui-XCharts
1、柱状图
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using XCharts;
public class ViewServiceLength : SingletonMono<ViewServiceLength>
{
BarChart barChart;
string name = "服役人数";
public void SetData(Dictionary<string, int> data)
{
barChart = GetComponent<BarChart>();
//清除原有数据
barChart.RemoveData();
int maxIndex = 0;
//添加横向轴
foreach (var item in data)
{
barChart.AddXAxisData(item.Key);
maxIndex = maxIndex > item.Value ? maxIndex : item.Value;
}
if (maxIndex > 10)
{
barChart.yAxis0.minMaxType = Axis.AxisMinMaxType.Default;
}
else
{
barChart.yAxis0.minMaxType = Axis.AxisMinMaxType.Custom;
barChart.yAxes[0].max = 10;
}
barChart.xAxes[0].splitNumber = data.Count;
barChart.xAxes[0].boundaryGap = true;
barChart.yAxes[0].splitNumber = 5;
barChart.yAxes[0].boundaryGap = false;
barChart.AddSerie(SerieType.Bar, name);
//样式
barChart.series.GetSerie(0).barWidth = 0.2f;
barChart.series.GetSerie(0).label.show = true;
barChart.series.GetSerie(0).label.offset = new Vector3(0, 20, 0);
barChart.series.GetSerie(0).itemStyle.toColor = new Color(255 / 255f, 184 / 255f, 0 / 255f, 1);
barChart.series.GetSerie(0).itemStyle.color = new Color(255 / 255f, 139 / 255f, 0 / 255f, 1);
barChart.series.GetSerie(0).label.textStyle.font = HttpGetMessage.Instance.defaultFont;
barChart.series.GetSerie(0).label.textStyle.color = new Color(1, 1, 1, 1);
foreach (int item in data.Values)
{
barChart.AddData(name, item);
}
}
}
2、折线图
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using XCharts;
public class ViewVacation : SingletonMono<ViewVacation>
{
LineChart lineChart;
string name = "人次";
public void SetData(Dictionary<string, int> data)
{
lineChart = GetComponent<LineChart>();
//清除所有数据
lineChart.RemoveData();
int maxIndex = 0;
foreach (var item in data)
{
lineChart.AddXAxisData(item.Key);
maxIndex = maxIndex > item.Value ? maxIndex : item.Value;
}
if (maxIndex > 10)
{
lineChart.yAxis0.minMaxType = Axis.AxisMinMaxType.Default;
}
else
{
lineChart.yAxis0.minMaxType = Axis.AxisMinMaxType.Custom;
lineChart.yAxes[0].max = 10;
}
lineChart.xAxes[0].splitNumber = data.Count;
lineChart.xAxes[0].boundaryGap = true;
lineChart.yAxes[0].splitNumber = 5;
lineChart.yAxes[0].boundaryGap = false;
lineChart.AddSerie(SerieType.Line, name);
lineChart.series.GetSerie(0).label.show = true;
lineChart.series.GetSerie(0).label.offset = new Vector3(0, 20, 0);
lineChart.series.GetSerie(0).itemStyle.color = new Color(102 / 255f, 233 / 255f, 198 / 255f, 1);
lineChart.series.GetSerie(0).label.textStyle.font = HttpGetMessage.Instance.defaultFont;
lineChart.series.GetSerie(0).label.textStyle.color = new Color(1, 1, 1, 1);
lineChart.series.GetSerie(0).lineType = LineType.Smooth;
foreach (int item in data.Values)
{
lineChart.AddData(name, item);
}
}
}
3、饼状图
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using XCharts;
public class ViewEducation : SingletonMono<ViewEducation>
{
PieChart pieChart;
string name = "人员学历";
public void SetData(Dictionary<string, int> data)
{
pieChart = GetComponent<PieChart>();
//清除原有数据
pieChart.RemoveData();
//pieChart.xAxes[0].splitNumber = data.Count;
//pieChart.xAxes[0].boundaryGap = true;
//pieChart.yAxes[0].splitNumber = 5;
//pieChart.yAxes[0].boundaryGap = false;
pieChart.AddSerie(SerieType.Pie, name);
//样式
pieChart.series.GetSerie(0).center = new float[2] { 0.5f, 0.3f };
pieChart.series.GetSerie(0).radius = new float[2] { 0.1f, 80 };
pieChart.series.GetSerie(0).label.show = true;
pieChart.series.GetSerie(0).label.formatter = "{c}人 {d:f1}%/n {b}";
//pieChart.series.GetSerie(0).label.offset = new Vector3(0, 20, 0);
//pieChart.series.GetSerie(0).itemStyle.toColor = new Color(255 / 255f, 184 / 255f, 0 / 255f, 1);
//pieChart.series.GetSerie(0).itemStyle.color = new Color(255 / 255f, 139 / 255f, 0 / 255f, 1);
pieChart.series.GetSerie(0).label.textStyle.font = HttpGetMessage.Instance.defaultFont;
pieChart.series.GetSerie(0).label.textStyle.color = new Color(1, 1, 1, 1);
pieChart.series.GetSerie(0).label.lineLength2 = 40;
foreach (var item in data)
{
pieChart.AddData(0, item.Value, item.Key);
}
}
}
4、列表
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class ViewOrganization : SingletonMono<ViewOrganization>
{
GameObject Item;
GameObject Content;
Dictionary<string, GameObject> items;
private void Start()
{
Content = transform.Find("Viewport/Content").gameObject;
Item = transform.Find("Viewport/Content/Item").gameObject;
items = new Dictionary<string, GameObject>();
}
public void SetData(Dictionary<string, int> data)
{
foreach (var item in items)
{
GameObject.Destroy(item.Value);
}
items.Clear();
int index = 0;
foreach (var item in data)
{
GameObject obj = GameObject.Instantiate(Item);
items.Add(item.Key, obj);
//obj.transform.parent = Content.transform;
obj.transform.SetParent(Content.transform);
obj.GetComponent<RectTransform>().localPosition = new Vector3(0, 0, 0);
obj.transform.localScale = new Vector3(1, 1, 1);
int color = index % 2 == 1 ? 0 : 1;
SetItem(obj, item.Key, item.Value, color);
index++;
}
}
void SetItem(GameObject obj,string key,int value,int color)
{
Image bg = obj.GetComponent<Image>();
Text textKey = obj.transform.Find("Text_Key").GetComponent<Text>();
Text textValue = obj.transform.Find("Text_Value").GetComponent<Text>();
textKey.text = key;
textValue.text = value.ToString();
bg.color = new Color(1, 1, 1, color);
obj.SetActive(true);
}
}
网友评论