如何在html里使用echarts

来源：互联网 2023-03-16 19:18:55 387

在网页中使用echarts可以让页面变得更丰富，今天小编给大家讲解下如何在html里使用echarts

如何在html里使用echarts

工具/原料

在浏览器中打开echarts官网，点击下载进入下载页面

如何在html里使用echarts

这里我们可以选择方法三进行下载

如何在html里使用echarts

选择要打包的图表，坐标系和组件，然后点击下载

如何在html里使用echarts

在代码编辑器中新建test.html，并在页面头部引入echarts，并在body标签里新建一个div

如何在html里使用echarts

在script标签里面加上以下代码：

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById("test"));

// 指定图表的配置项和数据

var option = {

xAxis: {

type: 'category',

data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

yAxis: {

type: 'value'

series: [{

data: [120, 200, 150, 80, 70, 110, 130],

type: 'bar'

}]

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

如何在html里使用echarts

在浏览器中打开test.html，会在页面里看到柱状图

如何在html里使用echarts

6本页面未经许可获取自百度经验

echarts的更多使用方法可以查看官方文档

如何在html里使用echarts

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： CSS HTML

上一篇：css如何设置p标签的宽度下一篇：css如何让固定高度的p标签内容居中