在使用echarts图形插件绘制仪表盘,除了绑定相应的数据之外,还可以设置图形属性。那么,具体是怎么设置的呢?
工具/原料
1
echarts
2
jquery
3
JavaScript
4
HTML5
5
CSS3
6
HBuilderX
7
WPS
8
截图工具
9
浏览器
方法/步骤
1
打开HBuilderX工具,新建一个静态页面文件,并引入jquery和echarts依赖文件
2
在
标签中,插入图形容器并添加id属性,设置图形大小3
在script标签中,添加jquery初始化函数,并初始化图形对象绑定数据和样式属性
4
使用定时器函数setInterval,动态改变仪表盘数据,并加载到界面上
5
保存代码并运行项目文件,打开浏览器查看图形效果
6
在option对象中的series数组中,添加不同的属性对象,设置图形样式和展示形态
7
再次保存代码并刷新浏览器,可以看到仪表盘图发生了变化
注意事项
1
注意echarts仪表盘属性如何设置
2
注意仪表盘图使用场景和设置方法