目录
引入
如何在一个HTML文件中编写两个图表:(这个例子基于这个篇文章的基础)
一篇搞懂前端获取数据-CSDN博客
一个例子:
1.在一个HTML文件中编写两个图表
重点在于名字的不重复性,和创建后位置的不重叠性:
<div id="main02" style="width: 30%;height:40vh;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main02'));
</script>
2.渐变背景
【详见 areaStyle部分】
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
//渐变颜色
areaStyle: {
color: {
type: 'linear', // 线性渐变
x: 0, // 起始位置
y: 0,
x2: 0, // 结束位置
y2: 1,
colorStops: [{
offset: 0, color: 'rgb(151,248,204)' // 0% 处的颜色
},{
offset: 0.5, color: 'rgb(151,248,204)' // 50% 处的颜色
}, {
offset: 1, color: 'rgb(106,172,252)' // 100% 处的颜色
}],
}
}
}
],
其他部分由于和这篇文章-->一篇搞懂前端获取数据-CSDN博客大差不差,所哟
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » ECharts折线图背景渐变设置
发表评论 取消回复