1.导入Echarts
2.scripts引用
3.var myChart = echarts.init($("#e1")[0]);
4.myChart.setOption(option)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#e1{
width: 500px;
height: 300px;
border:2px solid aqua;
}
</style>
<script type="text/javascript" src="../js/echarts.js" />
</script>
<script type="text/javascript" src="../js/jquery.js" />
</script>
</head>
<body>
<div id="e1"></div>
</body>
<script type="text/javascript">
var myChart = echarts.init($("#e1")[0]);
var option = {
title: {
text: "echarts-demo"
},
tooltip: {},
legend: {
data: ['销量', '业绩']
},
xAxis: {
data: ['商品A', '商品B', '商品C', '商品D', '商品E']
},
yAxis: {},
series: [{
name: "销量",
type: "bar",
data: [5, 8, 6, 6, 8]
},
{
name: "业绩",
type: "bar",
data: [6, 8, 6, 6, 6]
}
]
}
myChart.setOption(option)
</script>
</html>
属性描述 title 图标的标题组件
text 组件文本信息
tooltip 鼠标hover到series的某一项出现的显示信息组件
legend 图例组件
data 横轴的数据有多少个分类
xAxis 横轴
data 横轴有多少种数据
yAxis 纵轴
series 展示数据的数据集合
name
type
data
series数数据与横轴数据一一对应
193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
