Echarts图表绘制,小白看了不迷路

快速上手中学习如何绘制一个简单的图标? Echarts插件就是一个很好的选择,ECharts 是一个使用 JavaScript 实现的免费商用的开源可视化库,内容包含行业内各种图示图标,可满足各种需求。在使用前我们可以到官网下载echarts.min.js或echarts.js 并用

2.基于准备好的DOM容器,开始通过echarts.init方法 初始化一个echarts实例配置项

var mychar =echarts.init(document.getElementbyId("main"));

3.设置图标配置项与数据,其中常用基本配置项有:
在这里插入图片描述

Color:这个配置项我们称之为调色盘,可更改各个图例的颜色;
legend:这个配置项用于改变图例放置的位置,布局朝向,上下左右的边距;
xAxis:用于设置x轴的特定数据,即我们想要设置的度量数据,如果想要改变该数轴颜色,
可通过加入color属性直接在xAxis内设置;
yAxis:y数值轴,当属性值等于value时适用于连续数据。
tooltip:是否显示提示框组件,当tooltip.trigger的属性值为axis时意为坐标轴触发,tooltip.formatter 的意为提示框浮层内容格式器,支持字符串模板和回调函数两种形式。

series:图例,eg: 在这里插入图片描述

  1. 使用自定的配置项和数据显示图标(是图标呈现出来的步骤)
    lineChart.setOption(lineOption);
    到这里为止一个简单的折线图的绘制就结束了,以上截图运行的效果大家可以看一下:
    在这里插入图片描述

在Echarts中这只是一个最简单的折线图绘制,这个插件里面属性的使用也是非常直观的显示在官网的配置项手册内,各种图表示例更是让我们在使用方便时简单明了,不仅如此还可直接在官网进行设置运行,让我们更直观方便的的得到自己的样式代码。
有需要的可以到以下地址下载使用喔: https://www.echartsjs.com/zh/download.html.
我的分享结束谢谢大家的浏览,有不对的地方欢迎大家指正。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值