快速上手中学习如何绘制一个简单的图标? 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:
- 使用自定的配置项和数据显示图标(是图标呈现出来的步骤)
lineChart.setOption(lineOption);
到这里为止一个简单的折线图的绘制就结束了,以上截图运行的效果大家可以看一下:
在Echarts中这只是一个最简单的折线图绘制,这个插件里面属性的使用也是非常直观的显示在官网的配置项手册内,各种图表示例更是让我们在使用方便时简单明了,不仅如此还可直接在官网进行设置运行,让我们更直观方便的的得到自己的样式代码。
有需要的可以到以下地址下载使用喔: https://www.echartsjs.com/zh/download.html.
我的分享结束谢谢大家的浏览,有不对的地方欢迎大家指正。