效果图
视图代码:
@{
ViewBag.Title = "Index";
}
<head>
<script src="~/Content/echarts.min.js"></script>
<script src="~/Content/jquery-3.5.1.js"></script>
<script src="~/Content/jquery-3.5.1.min.js"></script>
</head>
<body>
<div id="main" style="width: 1200px;height:800px;padding-top:50px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var Unit=@Html.Raw(ViewBag.Unit);
var option = {
title: {
text:"图表",
left:"center"
},
legend: {
left: 10,
top:"3%",
data:@Html.Raw(ViewData["Legend"]),
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false
},
formatter: function (a) {
let list = []
let listItem = ''
for (var i = 0; i < a.length; i++) {
list.push(
'<i style="display: inline-block;width: 10px;height: 10px;background: ' +
a[i].color +
';margin-right: 5px;border-radius: 50%;}"></i><span style="width:50px; display:inline-block;">' +
a[i].seriesName + '</span>:' + a[i].value + Unit[i]
)
}
listItem = list.join('<br>')
return '<div class="showBox">' + listItem + '</div>'
}
},
toolbox: {
feature: {
dataZoom: {
//yAxisIndex: 'none' //屏蔽Y轴缩放
},
restore: {},
saveAsImage: {}
}
},
xAxis:{
data:@Html.Raw(ViewData["XAxis"]),
},
axisPointer: {
link: { xAxisIndex: 'all' }
},
yAxis:@Html.Raw(ViewData["yAxis"]),
series:@Html.Raw(ViewData["Seriers"]),
};
myChart.setOption(option);
</script>
</body>
先在Models中添加辅助类SeriersBase
public class SeriersBase
{
public string name { get; set; }
public string type { get; set; }
public List<double> data { get; set; }
public int yAxisIndex { get; set; }
public string color { get; set; }
}
再来一个辅助类yAxisBase
public class yAxisBase
{
public string position { get; set; }
public int offset { get; set; }
public int max { get; set; }
public int min { get; set; }
public string type { get; set; }
public AxisLine axisLine { get; set; }
}
public class AxisLine
{
//是否展示多Y轴
public bool show { get; set; }
}
控制器代码
// GET: Test
public ActionResult Index()
{
//手动设置一些数据
List<string> values = new List<string>();
values.Add("08:00:00,1,10,20,30,40");
values.Add("08:00:01,2,11,21,31,41");
values.Add("08:00:02,3,12,22,32,42");
values.Add("08:00:03,4,13,23,33,43");
values.Add("08:00:04,5,14,24,34,44");
//设置要显示的单位
var stringArray = new List<string>();
stringArray.Add("mm");
stringArray.Add("cm");
stringArray.Add("m");
stringArray.Add("Pa");
stringArray.Add("K");
ViewBag.Unit = Newtonsoft.Json.JsonConvert.SerializeObject(stringArray);
//动态配置Legend
ViewData["Legend"] = GetLegend();
//实现多Y轴
ViewData["yAxis"] = GetyAxis();
//绑定X轴的数据显示
ViewData["XAxis"] = GetXAxis(values);
//将数据实时绑定到图表上
ViewData["Seriers"] = GetSeriers(values, 5, new string[] { "个" ,"十", "百", "千", "万" });
return View();
}
private string GetLegend()
{
string[] columnlist = new string[] { "个", "十", "百", "千", "万" };
return JsonConvert.SerializeObject(columnlist);
}
private string GetyAxis()
{
List<string> columnlist = new List<string>();
columnlist.Add("0,10");
columnlist.Add("10,20");
columnlist.Add("20,31");
columnlist.Add("30,42");
columnlist.Add("40,53");
columnlist.Sort();
List<Models.yAxisBase> liststat = new List<Models.yAxisBase>();
for (int i = 0; i < columnlist.Count; i++)
{
string[] temp = columnlist[i].Split(',');
//offset = i * 30 是配置每两个Y轴之间的间隔
liststat.Add(new Models.yAxisBase() { position = "left", offset = i * 30, max = temp != null && temp.Length > 1 ? Convert.ToInt32(temp[1]) : 100, min = temp != null && temp.Length > 1 ? Convert.ToInt32(temp[0]) : 0, type = "value", axisLine = new Models.AxisLine() { show = true } });//设置展示多Y轴
}
return JsonConvert.SerializeObject(liststat);
}
private string GetXAxis(List<string> _value)
{
List<string> XAxis = new List<string>();
foreach (string item in _value)
{
string[] data = item.Split(',');
XAxis.Add(data.First());
}
return JsonConvert.SerializeObject(XAxis);
}
private string GetSeriers(List<string> _value, int columncount, string[] columnlist)
{
List<Models.SeriersBase> liststat = new List<Models.SeriersBase>();
List<double>[] datastring = new List<double>[columncount];//每个Y轴上的数值集合
foreach (string item in _value)
{
string[] data = item.Split(',');
for (int i = 1; i < data.Length; i++)
{
if (datastring[i-1] == null)
datastring[i-1] = new List<double>();
datastring[i-1].Add(Convert.ToDouble(data[i]));
}
}
//准备的颜色
List<string> colorlist = new List<string>();
colorlist.Add("Red");
colorlist.Add("Yellow");
colorlist.Add("Blue");
colorlist.Add("Black");
colorlist.Add("Purple");
for (int i = 0; i < columnlist.Length; i++)
{
//yAxisIndex = i 对应的就是,当前是第几个Seriers,对应的量程索引是第几位,即在设置yAxis中的columnlist
liststat.Add(new Models.SeriersBase() { name = columnlist[i], color = colorlist[i], yAxisIndex = i, type = "line", data = datastring[i] });
}
return JsonConvert.SerializeObject(liststat);
}
结束。
就是这么强大,烦恼!