Echarts实例，在线引入echarts
程序员文章站
2022-06-14 14:57:08
...
下载地址 https://echarts.apache.org/zh/download.html
引入在线版本echarts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个实例</title>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js">
</script>
</head>
第一个实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个实例</title>
//引入在线版本Echarts
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js">
</script>
</head>
<body>
//背景
<div id="main" style="width: 400px;height: 400px;border: aqua 3px solid"></div>
//写Javascript语言
<script type="text/javascript">
//初始化Echarts实例
var myEcharts=echarts.init(document.getElementById('main'))
//定义变量
var option={
//图例
title:{text:'第一个手写的电子图'},
//图例组件
legend:{data:['销量'],textStyle:{color:'blue'}},
xAxis:{data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']},
yAxis: {},
series: [{
name: '销量',
//柱状图
type: 'bar',
data: [5, 20, 36, 10, 10, 20]}]
};
//设置配置
myEcharts.setOption(option);
</script>
</body>
</html>