首页 > 软件开发 > JavaScript >

echarts渐变色设置

来源:互联网 2023-03-17 00:02:41 版权归原作者所有,如有侵权,请联系我们

在echarts图形插件中,可以使用自带的方法设置图形样式。那么,如何设置echarts渐变色?yoR办公区 - 实用经验教程分享!

echarts渐变色设置yoR办公区 - 实用经验教程分享!

工具/原料

  • echarts
  • jquery
  • JavaScript
  • HTML5
  • CSS3
  • HBuilderX
  • WPS
  • 截图工具
  • 浏览器

方法/步骤

  • 1

    打开HBuilderX开发工具,新建一个静态页面文件,并引入jquery-3.4.1.min.js和echarts.min.jsyoR办公区 - 实用经验教程分享!

    echarts渐变色设置yoR办公区 - 实用经验教程分享!

  • 2

    在body>/body>标签中,插入一个div标签,并设置id属性值为gkm;使用ID选择器设置图形容器大小yoR办公区 - 实用经验教程分享!

    echarts渐变色设置yoR办公区 - 实用经验教程分享!

  • 3

    在script标签中,实例化对象line;定义图形数据和相关属性对象option;然后调用setOption()方法yoR办公区 - 实用经验教程分享!

    echarts渐变色设置yoR办公区 - 实用经验教程分享!

  • 4

    保存代码并运行页面文件,打开浏览器,可以查看到一个面积图yoR办公区 - 实用经验教程分享!

    echarts渐变色设置yoR办公区 - 实用经验教程分享!

  • 4该信息未经许可获取自百度经验
  • 5

    在option对象中,添加areaStyle,并调用echarts.graphic.LinearGradient()方法设置渐变色yoR办公区 - 实用经验教程分享!

    echarts渐变色设置yoR办公区 - 实用经验教程分享!

  • 6

    再次保存代码并刷新浏览器,可以看到面积图的面颜色出现渐变效果yoR办公区 - 实用经验教程分享!

    echarts渐变色设置yoR办公区 - 实用经验教程分享!

  • 总结

    • echarts渐变色设置yoR办公区 - 实用经验教程分享!

      new echarts.graphic.LinearGradient()yoR办公区 - 实用经验教程分享!

      echarts渐变色设置yoR办公区 - 实用经验教程分享!

    注意事项

    • 注意echarts渐变色设置
    • 注意如何设置和控制echarts图形背景色

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!yoR办公区 - 实用经验教程分享!


    标签: JAVASCRIPTJQUERY

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号