HBulider X 创建ECharts可视化图表（柱状图，折线图等等）步骤

18岁工科老大爷

已于 2022-10-09 18:23:35 修改

阅读量6.2k

点赞数 14

分类专栏： echarts使用文章标签： echarts 前端 javascript

于 2022-10-09 18:06:12 首次发布

本文链接：https://blog.csdn.net/weixin_61620336/article/details/127230700

版权

echarts使用专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用ECharts进行数据可视化，包括下载安装HBuliderX、获取echarts.min.js文件及编写基本示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.需先下载HBulider X

https://download1.dcloud.net.cn/download/HBuilderX.3.6.4.20220922.zip

下载好之后，打开并新建目录，目录名称自己设置（比如：echarts_exercise）

2.下载echarts.min.js

我们可以在echarts官网下载，链接如下：

https://github.com/apache/echarts/tree/5.4.0/dist

我只是简单的学习可视化，所以下载的是的echarst.min.js

也可以通过百度网盘下载http://链接：https://pan.baidu.com/s/1GKwtN3UCOOTwWwbFyNvIjA?pwd=5ocu 提取码：5ocu

echarts.common.min.js，表示体积适中，包含常见的图表和组件；

echarts.simple.min.js，体积较小，仅包含最常用的图表和组件；

大家可以按自己需求去下载。

3.以上图为例，点击echarts.simple.min.js，进入后点 raw 如下图：

进入后为一大长串代码，只需要鼠标右键另存到本地你的运行文件中（比如我的就放在echarts_exercise中）；

4.最后就是我在HBulidX里面的代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>

<script src="echarts.min.js"></script>
</head>
<body>

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

var option = {
title: {
text: 'ECharts 实例一',
               textStyle:{
                   color:'#c2c2c2',
                   fontSize:23
               }
},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};

myChart.setOption(option);
</script>
</body>
</html>