@Kener-林峰 你好,想跟你请教个问题:
用echarts曲线插件完成了一个网页,原来用的是自动分配折线颜色,现在想改成自定义折线颜色,但是我的折线数据是从后台动态获取的,我应该如何添加定义折线的颜色代码。因为折线的颜色定义层次很深,不同于name 和 id 这些顶层的参数,所以,目前,第一,我弄不清楚这段功能到底应该实现于前台,还是后台? 第二,位置确定后,我该如何去拼接相关的参数?
附录:
前台代码片段:
function DrawEChart(ec) {
document.getElementById("main").style.color = "#000000";
//--- 折柱 ---
myChart = ec.init(document.getElementById('main'));
// alert("OK2");
//定义图表options
var options = {
backgroundColor:'rgba(0,0,0,1)',
title: {
text: "tuneup",
subtext: "www.jltuneup.com",
sublink: "http://www.jltuneup.com"
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ["示例数值"]
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataZoom: { show: true },
dataView: { show: true },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
dataZoom: {
show: true,
realtime: true,
//orient: 'vertical', // 'horizontal'
//x: 0,
y: 36,
//width: 400,
height: 20,
backgroundColor: 'rgba(221,160,221,0.5)',
dataBackgroundColor: 'rgba(138,43,226,0.5)',
fillerColor: 'rgba(17,232,232,0.6)',
handleColor: 'rgba(128,43,16,0.8)',
//xAxisIndex:[],
//yAxisIndex:[],
start: 0,
end: 100
},
//网格
grid:{
x: 80, y: 60, x2: 80, y2: 60,
backgroundColor: 'rgba(0,0,0,1)',
borderWidth: 1,
borderColor:'#ccc'
},
//类目轴
categoryAxis: {
position: 'bottom', //位置
nameLocation: 'end', //坐标轴名字位置,支持'start' | 'end'
boundaryGap: true, //类目起始和结束两端空白策略
axisLine: { //坐标轴线
show: true, //默认显示,属性show控制显示与否
lineStyle: { //属性lineStyle控制线条样式
color: '#48b',
width: 2,
type:'solid'
}
},
axisTick: { //坐标轴小标记
show: true, //默认不显示,属性show控制显示与否
interval: 'auto',
inside: false, //控制小标记是否在grid里
length: 5, //属性length控制线长
lineStyle: { //属性lineStyle控制线条样式
color: '#333',
width:1
}
},
axisLabel: { //坐标轴文本标签,详见axis.axisLabel
show: true,
interval: 'auto',
rotate: 0,
margin: 8,
//
textStyle: { //其余属性默认使用全局文本样式,详见textstyle
color:'#000'
}
},
splitLine: { //分隔区域
show: false, //默认不显示,属性show控制显示与否
lineStyle: { //属性lineStyle(详见lineStyle)控制线条样式
color: ['#ccc'],
width: 1,
type:'solid'
}
},
splitArea: { //分隔区域
areaStyle: { //属性areaStyle(详见areaStyle)控制区域样式
color: ['rgba(0,0,0,0.5)', 'rgba(221,160,221,0.5)']
}
}
},
//折线图默认参数
line: {
itemStyle: {
normai:{
lable: {
show:false
},
lineStyle: {
width: 2,
type: 'solid',
shadowColor: 'rgba(0,0,0,0)',//默认透明
shadowBlur: 5,
shadowOffsetX: 3,
shadowOffsetY:3
}
},
emphasis:{
label:{
show:false
}
}
},
symbolSize: 2, //拐点图形大小
showAllSymbol: false //标志图形默认只有主轴显示(随主轴标签间隔隐藏策略)
},
calculable: true,
xAxis: [
{
type: 'category',
boundaryGap: false,
splitLine: { show: false }, //显示/隐藏横分隔区域
data: ["001", "002", "003"] //数据值对应的x坐标值
}
],
yAxis: [
{
type: 'value',
splitArea: { show: false }, //y轴值与数据值对应,显示/隐藏横分隔区域
splitLine: { show: false }, //显示/隐藏横分隔区域
axisLabel: {
formatter: '{value} A',
}
}
],
series: [{
name: "值",
type: "line",
data: [100, 300, 600],//数据值
itemStyle:{color:'rgba(0,0,0,1)'}//图例颜色配置
}]
};
//alert("OK3");
//选择一个空图表
myChart.setOption(options);
}
// 按需加载
// Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径
require.config({
paths: {
echarts: 'js/echarts227/build/dist' //echarts.js的路径
}
});
// Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径
require(
[
'echarts',
'echarts/chart/line', //按需加载图表关于线性图、折线图的部分
'echarts/chart/bar'
],
DrawEChart //异步加载的回调函数绘制图表
);
// alert("OK4");
///点击按钮获取图表数据采用ajax方式
function GetAjaxChartData() {
//获得图表的options对象
var options = myChart.getOption();
//图表显示提示信息
myChart.showLoading({
text: "图表数据正在努力加载..."
});
var txtStatDate = $("#txtStatDate").val() + $("#ddlStartHour").val() + $("#ddlStartMinute").val();
var txtEndDate = $("#txtEndDate").val() + $("#ddlEndHour").val() + $("#ddlEndMinute").val();
var ddlChatType = $("#ddlChatType").val();
//通过Ajax获取数据
$.ajax({
type: "post",
async: false, //同步执行
url: "Device_L_Curve.aspx/GetAjaxData?type=getData&count=100&jmid=<%=Request["mid"]%>&",
// contentType: "application/json; charset=utf-8", //内容类型
dataType: "json", //返回数据形式为json
data: { "datetime": txtStatDate, "chattype": ddlChatType, "datetime2": txtEndDate },
success: function (result) {
if (result) {
myChart.clear();
//将返回的category和series对象赋值给options对象内的category和series
//因为xAxis是一个数组 这里需要是xAxis[i]的形式
//alert("OK4");
options.xAxis[0].data = result.category;
options.xAxis[0].axisLabel = {
textStyle: { color: "#fff" }
}
options.yAxis[0].axisLabel = {
textStyle:{color:"#fff"},
formatter: function (value) {
return value + result.cunit;
}
}
options.series = result.series;
//options.series.itemStyle.normai.lineStyle.color = result.lineColor;
options.legend.data = result.legend;
myChart.hideLoading();
myChart.setOption(options);
//var aaa = document.getElementById('getbutton');
//aaa.disabled = true; //使用true或false,控制是否让按钮禁用
total = result.total;
rbefore = result.rbefore;
rtotal = result.rtotal;
IAfter = result.IAfter_b;
IBefore = result.IBefore_b;
}
},
error: function (errorMsg) {
alert("图表请求数据失败!");
}
});
document.getElementById("<%=Label1.ClientID%>").innerText = rbefore;
document.getElementById("<%=Label1.ClientID%>").innerHTML = rbefore;
document.getElementById("<%=Label2.ClientID%>").innerText = rtotal;
document.getElementById("<%=Label2.ClientID%>").innerHTML = rtotal;
document.getElementById("<%=Label3.ClientID%>").innerText = total;
document.getElementById("<%=Label3.ClientID%>").innerHTML = total;
document.getElementById("<%=Label4.ClientID%>").innerText = IBefore;
document.getElementById("<%=Label4.ClientID%>").innerHTML = IBefore;
document.getElementById("<%=Label5.ClientID%>").innerText = IAfter;
document.getElementById("<%=Label5.ClientID%>").innerHTML = IAfter;
}
后台代码片段:
//考虑到图表的category是字符串数组 这里定义一个string的List
List<string> categoryList = new List<string>();
//考虑到图表的series数据为一个对象数组 这里额外定义一个series的类
List<Series> seriesList = new List<Series>();
//考虑到Echarts图表需要设置legend内的data数组为series的name集合这里需要定义一个legend数组
List<string> legendList = new List<string>();
//定义一个折线颜色数组
List<string> lineColorList = new List<string>();
//定义一个Series对象
Series seriesObj1 = new Series();
seriesObj1.id = 1;
seriesObj1.name = parameters1;
seriesObj1.type = "line"; //线性图呈现
seriesObj1.data = new List<double>(); //先初始化 不初始化后面直直接data.Add(x)会报错
Series seriesObj2 = new Series();
seriesObj2.id = 2;
seriesObj2.name = parameters2;
seriesObj2.type = "line";
seriesObj2.data = new List<double>();
Series seriesObj3 = new Series();
seriesObj3.id = 3;
seriesObj3.name = parameters3;
seriesObj3.data = new List<double>();
Series seriesObj4 = new Series();
seriesObj4.id = 4;
seriesObj4.name = parameters4;
seriesObj4.data = new List<double>();
Series seriesObj5 = new Series();
seriesObj5.id = 5;
seriesObj5.name = parameters5;
seriesObj5.data = new List<double>();
Series seriesObj6 = new Series();
seriesObj6.id = 6;
seriesObj6.name = parameters6;
seriesObj6.data = new List<double>();
//设置legend数组
legendList.Clear();
seriesList.Clear();
seriesObj1.data.Clear();
seriesObj2.data.Clear();
seriesObj3.data.Clear();
seriesObj4.data.Clear();
seriesObj5.data.Clear();
seriesObj6.data.Clear();
legendList.Add(parameters1);
legendList.Add(parameters2);
legendList.Add(parameters3);
legendList.Add(parameters4);
legendList.Add(parameters5);
legendList.Add(parameters6);
lineColorList.Add("FFFF00");
lineColorList.Add("00FF00");
lineColorList.Add("FF0000");
lineColorList.Add("FFD700");
lineColorList.Add("008B00");
lineColorList.Add("FF00FF");
//设置数据
for (int i = 1; i <= scalar; i++)
{
//加入category刻度数组
categoryList.Add(string.Format("{0}", values[6, i]));
//加入数据值series序列数组
seriesObj1.data.Add(Convert.ToDouble(values[0, i])); //数据依次递增
seriesObj2.data.Add(Convert.ToDouble(values[1, i]));
seriesObj3.data.Add(Convert.ToDouble(values[2, i]));
seriesObj4.data.Add(Convert.ToDouble(values[3, i]));
seriesObj5.data.Add(Convert.ToDouble(values[4, i]));
seriesObj6.data.Add(Convert.ToDouble(values[5, i]));
}
seriesList.Add(seriesObj1);
seriesList.Add(seriesObj2);
seriesList.Add(seriesObj3);
seriesList.Add(seriesObj4);
seriesList.Add(seriesObj5);
seriesList.Add(seriesObj6);
if(title=="零线电流分布"||title=="调补后三相电流分布"||title=="变压器损耗分布"||title=="电流不平衡度分布")
{
ChartUnit = "A";
}
if (title == "调补后三相电压分布" || title == "调补后三相电压")
{
ChartUnit = "V";
}
if (title == "电容器基波阻抗值")
{
ChartUnit = "Ω";
}
if (title == "四只电容器及环境温度")
{
ChartUnit = "℃";
}
if (title == "调补后三相有功功率分布")
{
ChartUnit = "KW";
}
if (title == "调补后三相无功功率分布")
{
ChartUnit = "Kvar";
}
if (title == "调补后三相功率因数分布")
{
//ChartUnit = "cosΦ";
ChartUnit = " ";
}
//最后调用相关函数将List转换为Json
var newObj = new
{
category = categoryList,//数据值对应的x坐标值
series = seriesList, //数据值
legend = legendList,
Ftotal = FreactiveTotal,
Frbefore =FreactiveTotal_Before,
Frtotal =FreactiveTotal_After,
total=reactiveTotal,
rbefore=reactiveTotal_Before,
rtotal=reactiveTotal_After,
cunit=ChartUnit,
IAfter_b=IAfter,
IBefore_b=IBefore,
lineColor=lineColorList
};
//Response返回新对象的json数据
Response.Write(newObj.ToJson());
Response.End();
}
private void AlertAndGoURL(string p1, string p2)
{
throw new NotImplementedException();
}
private void Alert(string p)
{
Response.Write("当前时间没有任何数据,运行演示曲线");
return;
}
class Series // 定义一个Series类 设置其每一组sereis的一些基本属性
{
public int id // sereis序列组id
{
get;
set;
}
public string name // series序列组名称
{
get;
set;
}
public string type // series序列组呈现图表类型(line、column、bar等)
{
get;
set;
}
public List<double> data // series序列组的数据为数据类型数组
{
get;
set;
}
}