echarts 折线颜色

【华为云1024程序员节·向云而生】预约直播 抽14件华为电子产品礼包！>>>

@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;
        }
    }