echart使用初级篇

还好今年刚开始接触代码,所以很自然的用到了百度的Echarts,前辈说Echarts完爆highChart,没有体验过后者的繁琐,也不想体验。 :oops:

其实对于一张图来说,我们可以很自然的想到这张图的名称,数据,鼠标放上的提示信息,图例,X坐标、Y坐标,而这些东西,其实正对应着Echarts的一些参数。

titlt:对象,对应标题的设置
tooltip:对象,对应提示信息的设置
legend:对象,图例
xAxis:数组,对应X轴设置
yAxis:数组,对应Y轴设置
series:数组,各组数据的内容以及修饰

整个这些,组成了一张图的option(也是一个对象)

了解了这个之后,其实就需要了解一些细节性的东西了,对于每一个参数,想单独开一个帖子,不断的补充。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在HBuilder中使用ECharts,你需要按照以下步骤进行操作: 1. 首先,你需要下载ECharts的文件。你可以通过中提供的链接下载ECharts的文件。 2. 下载完成后,你可以将ECharts的文件引入到你的项目中。你可以使用中提供的代码将ECharts文件引入到你的HTML文件中。 3. 然后,在你的HTML文件中创建一个div元素,用于显示ECharts图表。你可以设置div元素的宽度和高度,如中的代码所示。 4. 在script标签中,你可以使用JavaScript代码来初始化ECharts实例并配置图表的选项。你可以参考中的代码来设置图表的标题、图例、X轴、Y轴和系列数据。 5. 最后,使用myChart.setOption(option)方法将配置好的选项应用到ECharts实例上。 这样,你就可以在HBuilder中使用ECharts来创建和展示图表了。记得在运行前检查路径和文件引入的正确性。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [大数据可视化-echarts玫瑰图(HBuilderX)](https://blog.csdn.net/weixin_64272885/article/details/129900036)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [HBulider X 创建ECharts可视化图表(柱状图,折线图等等)步骤](https://blog.csdn.net/weixin_61620336/article/details/127230700)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值