ZingChart绘制透明样条面积图

代码案例，参考

 <!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .chart--container {
      /* min-height: 530px; */
      width: 500px;
      height: 350px;
    }
 
    .zc-ref {
      display: none;
    }
  </style>
</head>
 
<body>
  <div id="myChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
  <script>
    ZC.LICENSE = ["xxx", "xxx"];
    let colors = {
      gray: '#EBEBEB',
      grayDark: '#3F3F3F',
    };
 
    // 生成数组的方法
    let randomVal = (min, max, num) => {
      let aData = [];
      for (let i = 0; i < num; i++) {
        let val = Math.random() * (max - min) + min;
        aData.push(parseInt(val));
      }
      return aData;
    };
 
    let chartConfig = {
      type: 'area',
      plot: {       // 图表样式、动画效果
        tooltip: {
          text: "%kl<br><span style='color:%color'>%t: </span>%v<br>",
          backgroundColor: 'white',
          bold: true,
          borderColor: '#e3e3e3',
          borderRadius: '5px',
          fontColor: '#2f2f2f',
          fontSize: '12px',
          padding: '15px',
          shadow: true,
          shadowAlpha: 0.2,
          shadowBlur: 5,
          shadowColor: '#a1a1a1',
          shadowDistance: 4,
          textAlign: 'left',
          visible: true,
        },
        animation: {
          delay: 400,
          effect: 'ANIMATION_EXPAND_TOP',
          method: 'ANIMATION_BOUNCE_EASE_OUT',
          sequence: 'ANIMATION_NO_SEQUENCE',
          speed: 500,
        },
        aspect: 'spline',
      },
      scaleX: {       // x轴样式
        guide: {
          alpha: 1,
          lineColor: colors.gray,
          lineStyle: 'solid',
        },
        item: {
          color: colors.grayDark,
        },
        lineColor: colors.gray,
        lineWidth: '1px',
        tick: {
          lineColor: '#C7C7C7',
          lineWidth: '1px',
        },
      },
      scaleY: {
        guide: {
          alpha: 1,
          lineColor: colors.gray,
          lineStyle: 'solid',
        },
        item: {
          color: colors.grayDark,
        },
        lineColor: colors.gray,
        lineWidth: '1px',
        step: 10,
        tick: {
          lineColor: '#C7C7C7',
          lineWidth: '1px',
        },
      },
      series: [{    // 2组数组
          values: randomVal(22, 42, 10),    // 生成数组
          backgroundColor: '#80DEEA',
          lineColor: '#80DEEA',
          lineWidth: '2px',
          marker: {
            backgroundColor: '#80DEEA',
          },
        },
        {
          values: randomVal(7, 32, 10),   // 生成数组
          backgroundColor: '#69F0AE',
          lineColor: '#69F0AE',
          lineWidth: '2px',
          marker: {
            backgroundColor: '#69F0AE',
          },
        },
      ],
    };
 
    zingchart.render({
      id: 'myChart',
      data: chartConfig,      // 展示上面的数据
      height: '100%',
      width: '100%',
    });
  </script>
</body>
 
</html>

效果图

posted @ 2024-05-23 09:03 DogLeftover 阅读(5) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· ZingChart绘制带日期的面积图

· ZingChart绘制面积折线图

· echarts 窗口范围 dataZoom

· ZetCode-GUI-教程-八-

· z-index及透明度

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？

ZingChart绘制透明样条面积图

我的标签

合集 (4)

随笔分类 (1350)

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>ZingSoft Demo</title>
	<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
	<style>
	.chart--container {
	/* min-height: 530px; */
	width: 500px;
	height: 350px;
	}

	.zc-ref {
	display: none;
	}
	</style>
	</head>

	<body>
	<div id="myChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
	<script>
	ZC.LICENSE = ["xxx", "xxx"];
	let colors = {
	gray: '#EBEBEB',
	grayDark: '#3F3F3F',
	};

	// 生成数组的方法
	let randomVal = (min, max, num) => {
	let aData = [];
	for (let i = 0; i < num; i++) {
	let val = Math.random() * (max - min) + min;
	aData.push(parseInt(val));
	}
	return aData;
	};

	let chartConfig = {
	type: 'area',
	plot: { // 图表样式、动画效果
	tooltip: {
	text: "%kl<br><span style='color:%color'>%t: </span>%v<br>",
	backgroundColor: 'white',
	bold: true,
	borderColor: '#e3e3e3',
	borderRadius: '5px',
	fontColor: '#2f2f2f',
	fontSize: '12px',
	padding: '15px',
	shadow: true,
	shadowAlpha: 0.2,
	shadowBlur: 5,
	shadowColor: '#a1a1a1',
	shadowDistance: 4,
	textAlign: 'left',
	visible: true,
	},
	animation: {
	delay: 400,
	effect: 'ANIMATION_EXPAND_TOP',
	method: 'ANIMATION_BOUNCE_EASE_OUT',
	sequence: 'ANIMATION_NO_SEQUENCE',
	speed: 500,
	},
	aspect: 'spline',
	},
	scaleX: { // x轴样式
	guide: {
	alpha: 1,
	lineColor: colors.gray,
	lineStyle: 'solid',
	},
	item: {
	color: colors.grayDark,
	},
	lineColor: colors.gray,
	lineWidth: '1px',
	tick: {
	lineColor: '#C7C7C7',
	lineWidth: '1px',
	},
	},
	scaleY: {
	guide: {
	alpha: 1,
	lineColor: colors.gray,
	lineStyle: 'solid',
	},
	item: {
	color: colors.grayDark,
	},
	lineColor: colors.gray,
	lineWidth: '1px',
	step: 10,
	tick: {
	lineColor: '#C7C7C7',
	lineWidth: '1px',
	},
	},
	series: [{ // 2组数组
	values: randomVal(22, 42, 10), // 生成数组
	backgroundColor: '#80DEEA',
	lineColor: '#80DEEA',
	lineWidth: '2px',
	marker: {
	backgroundColor: '#80DEEA',
	},
	},
	{
	values: randomVal(7, 32, 10), // 生成数组
	backgroundColor: '#69F0AE',
	lineColor: '#69F0AE',
	lineWidth: '2px',
	marker: {
	backgroundColor: '#69F0AE',
	},
	},
	],
	};

	zingchart.render({
	id: 'myChart',
	data: chartConfig, // 展示上面的数据
	height: '100%',
	width: '100%',
	});
	</script>
	</body>

	</html>