全套C++ 百万并发网络通信引擎架构与实现视频课程

// 初始化设置

var lens = 0;

var series_data = [];

var x_data = [];

var help_data = []; //复制数组，用于显示第二个series系列

var minData = 0;

var legendName = '平均运行速度';

series_data = [30,20,40,30,50,20];

x_data = ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23'];

minData = getMinData(series_data); //得到最小值

help_data = fillData(series_data,minData,help_data); //得到辅助数组的值

option = {

? ? backgroundColor: "rgba(23,60,110,.5)",

? ? grid: {

? ? ? ? left: '20%',

? ? ? ? right: '20%',

? ? ? ? bottom: '20%',

? ? },

? ? tooltip: {

? ? ? ? trigger: 'axis',

? ? ? ? formatter: function(params) {

? ? ? ? ? ? return "时间：" + params[0].name + ":00
" +

? ? ? ? ? ? ? ? params[0].seriesName + "：" + params[0].value + "Km/h
";

? ? ? ? },

? ? ? ? axisPointer: {

? ? ? ? ? ? type: 'line',

? ? ? ? ? ? lineStyle: {

? ? ? ? ? ? ? ? color: "rgba(50,243,255,1)",

? ? ? ? ? ? ? ? width: 2,

? ? ? ? ? ? ? ? type: 'dashed'

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? backgroundColor: 'rgba(16,75,136,.5)',

? ? ? ? borderColor: "rgba(50,

? ? ? ? borderWidth: 1,

? ? legend: {

? ? ? ? data: legendName

? ? },

? ? calculable: true,

? ? xAxis: [{

? ? ? ? name: "h",

? ? ? ? nameLocation: 'end',

? ? ? ? type: 'category',

? ? ? ? data: x_data,

? ? ? ? nameTextStyle: {

? ? ? ? ? ? color: '#fff',

? ? ? ? ? ? fontSize: 12,

? ? ? ? },//坐标轴名称的文字样式。

? ? ? ? boundaryGap: false,

? ? ? ? axisLine: { //坐标轴轴线相关设置

? ? ? ? ? ? show: true,

? ? ? ? ? ? lineStyle: {

? ? ? ? ? ? ? ? color: "rgba(48,194,

? ? ? ? ? ? },

? ? ? ? axisTick: {

? ? ? ? ? ? show: false

? ? ? ? },

? ? ? ? splitLine: { //分割线

? ? ? ? ? ? show: true,

? ? ? ? ? ? ? ? width: 1,

? ? ? ? ? ? ? ? type: "solid"

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? axisLabel: {

? ? ? ? ? ? show: true,

? ? ? ? ? ? margin: 10,

? ? ? ? ? ? textStyle: {

? ? ? ? ? ? ? ? color: "rgba(48,

? ? ? ? ? ? ? ? fontSize: 16,

? ? ? ? ? ? }

? ? ? ? },

? ? }],

? ? yAxis: [{

? ? ? ? name: 'km/h',

? ? ? ? type: 'value',

? ? ? ? nameTextStyle: {

? ? ? ? ? ? color: "rgba(48,//坐标轴名称的文字样式。

? ? ? ? axisLine: { //坐标轴轴线相关设置

? ? ? ? ? ? show: true,//标记长度

? ? ? ? axisLabel: {

? ? ? ? ? ? show: true,

? ? ? ? splitLine: {

? ? ? ? ? ? show: false,//分割线

? ? ? ? splitArea: {

? ? ? ? ? ? show: true,

? ? ? ? ? ? areaStyle: {

? ? ? ? ? ? ? ? color: ["rgba(48,.2)","rgba(48,.0)"],

? ? }],

? ? series: [{

? ? ? ? ? ? zlevel: 1,

? ? ? ? ? ? name: legendName,

? ? ? ? ? ? type: 'line',

? ? ? ? ? ? data: series_data,

? ? ? ? ? ? smooth:true,

? ? ? ? ? ? symbol: 'circle',

? ? ? ? ? ? symbolSize: 4,

? ? ? ? ? ? itemStyle: {

? ? ? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? ? ? color: 'yellow',

? ? ? ? ? ? ? ? ? ? borderColor: '#fff',

? ? ? ? ? ? ? ? ? ? borderWidth: 1,

? ? ? ? ? ? ? ? ? ? borderType: 'solid',

? ? ? ? ? ? ? ? ? ? shadowColor: '#fff',

? ? ? ? ? ? ? ? ? ? shadowBlur: 4,

? ? ? ? ? ? ? ? },

? ? ? ? ? ? lineStyle: {

? ? ? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? ? ? width: 4,

? ? ? ? ? ? ? ? ? ? color: {

? ? ? ? ? ? ? ? ? ? ? ? type: 'linear',

? ? ? ? ? ? ? ? ? ? ? ? x: 0,

? ? ? ? ? ? ? ? ? ? ? ? y: 0,

? ? ? ? ? ? ? ? ? ? ? ? x2: 1,//从左到右

? ? ? ? ? ? ? ? ? ? ? ? y2: 0,

? ? ? ? ? ? ? ? ? ? ? ? colorStops: [{

? ? ? ? ? ? ? ? ? ? ? ? ? ? offset: 0,

? ? ? ? ? ? ? ? ? ? ? ? ? ? color: 'rgb(255,224,4,1)' // 0% 处的颜色

? ? ? ? ? ? ? ? ? ? ? ? },{

? ? ? ? ? ? ? ? ? ? ? ? ? ? offset: 1,

? ? ? ? ? ? ? ? ? ? ? ? ? ? color: 'rgba(255,142,31,1)' // 100% 处的颜色

? ? ? ? ? ? ? ? ? ? ? ? }],

? ? ? ? ? ? ? ? ? ? ? ? globalCoord: false // 缺省为 false

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? areaStyle: { //折线颜色不取渐变色，取color设置值

? ? ? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? ? ? color: {

? ? ? ? ? ? ? ? ? ? ? ? type: 'linear',//从左到右，但不能从上到下，需要借助辅助系列

? ? ? ? ? ? ? ? ? ? ? ? y2: 0,.2)' // 0% 处的颜色

? ? ? ? ? ? ? ? ? ? ? ? },

? ? ? ? {

? ? ? ? ? ? name: legendName,

? ? ? ? ? ? data: help_data,

? ? ? ? ? ? hoverAnimation: false,//禁止触发

? ? ? ? ? ? zlevel: 2,

? ? ? ? ? ? symbolSize: 0,//不显示拐点

? ? ? ? ? ? lineStyle: {

? ? ? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? ? ? color: "rgba(48,0)"

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? areaStyle: { //折线颜色不取渐变色，取color设置值

? ? ? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? ? ? color: "rgba(48,.5)"

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? }

? ? ]

};

function getMinData(series_data) { //求最小值

? ? var min = series_data[0];

? ? for (var i = 1; i < series_data.length; i++) {

? ? ? ? var cur = series_data[i];

? ? ? ? cur < min ? min = cur : null;

? ? }

? ? return min;

}

function fillData(series_data,minData) { //获取辅助数组的值

? ? for (var i = 0; i < series_data.length; i++) {

? ? ? ? help_data.push(minData / 2);

? ? }

? ? return help_data;

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!