养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

echarts渐变色设置

时间:2024-10-01 17:16:08

在echarts图形插件中,可以使用自带的方法设置图形样式。那么,如何设置echarts渐变色?

echarts渐变色设置

工具/原料

echarts

jquery

JavaScript

HTML5

CSS3

HBuilderX

WPS

截图工具

浏览器

方法/步骤

1、打开HBuilderX开发工具,新建一个静态页面文件,并引入jquery-3.4.1.min.js和echarts.min.js

echarts渐变色设置

2、在<body></body>标签中,插入一个div标签,并设置id属性值为gkm;使用ID选择器设置图形容器大小

echarts渐变色设置

3、在script标签中,实例化对象line;定义图形数据和相关属性对象option;然后调用setOption()方法

echarts渐变色设置

4、保存代码并运行页面文件,打开浏览器,可以查看到一个面积图

echarts渐变色设置

5、在option对象中,添加areaStyle,并调用echarts.graphic.LinearGradient()方法设置渐变色

echarts渐变色设置

6、再次保存代码并刷新浏览器,可以看到面积图的面颜色出现渐变效果

echarts渐变色设置

© 一点知识