<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src=" https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<title>Document</title>
<style>
div{
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="main"></div><!--一定要创建一个Dom空间-->
<script>
const my = echarts.init(document.getElementById('main'))
const option ={
title:{text:'This is my first echarts'},//标题
color:["#003366"],//控制条状图等颜色
tooltip:{},//提示信息
legend:{//图里组件
data:[{//组件数据
name:'销量',//组件名称
icon:'diamond',//组件图标
textStyle:{//组件字体样式
color:'green'
}
}]
},
xAxis:{//x轴
data:['jijia','dadiao','qicaihong','huashuo','asdasd']
},
yAxis:{},//y轴
series:[{//系列列表
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 50]
}]
}
my.setOption(option)
</script>
</body>
</html>
type类型
type: ‘bar’:柱状/条形图
type: ‘line’:折线/面积图
type: ‘pie’:饼图
type: ‘scatter’:散点(气泡)图
type: ‘effectScatter’:带有涟漪特效动画的散点(气泡)
type: ‘radar’:雷达图
type: ‘tree’:树型图
type: ‘treemap’:树型图
type: ‘sunburst’:旭日图
type: ‘boxplot’:箱形图
type: ‘candlestick’:K线图
type: ‘heatmap’:热力图
type: ‘map’:地图
type: ‘parallel’:平行坐标系的系列
type: ‘lines’:线图
type: ‘graph’:关系图
type: ‘sankey’:桑基图
type: ‘funnel’:漏斗图
type: ‘gauge’:仪表盘
type: ‘pictorialBar’:象形柱图
type: ‘themeRiver’:主题河流
type: ‘custom’:自定义系列