echarts图类型设置
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
echarts图类型设置
1.title:标题组件
2.tooltip:提⽰框组件
3.legend：图例组件，展现了不同系列的标记(symbol)，颜⾊和名字
4.xAxis：直⾓坐标系 grid 中的 x 轴，单个 grid 组件最多只能放上下两个 x 轴。
5.yAxis:直⾓坐标系 grid 中的 y 轴，单个 grid 组件最多只能放左右两个 y 轴。
6.series:系列列表。
每个系列通过 type 决定⾃⼰的图表类型。
series type=line ——-折线图
series type=bar ——-柱状图
series type=pie ——-饼图
下⾯⽣成⼀个柱状图，贴上完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--引⼊echarts⽂件-->
<script src="../js/echarts.min.js"></script>
<script src="../js/echarts.js"></script>
<script src="../theme/dark.js"></script>
<title>柱状图</title>
</head>
<body>
<!--准备⼀个dom容器-->
<div id="main" style="width:600px;height:400px"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts
var myChart = echarts.init(document.getElementById('main'));
var option={
title:{
text:'第⼀个echarts'
},
tooltip:{}, //指⽰框
legend:{
data:['销量']
},
color:'pink',
xAxis:{
data:['苹果','李⼦','栗⼦','梨','草莓','菠萝']
},
yAxis:{},
series:[{
name:'销量',
type:'bar',
data:[5,10,36,10,18,20]
}]
};
myChart.setOption(option);
</script>
</body>
</html>
⽣成的柱状图如下（粉⾊的⼩可爱）
然后改变⼀下类型 type:line (蓝⾊的⼩清新)
在来⽣成饼图，饼图是没有xy轴的，先给注释掉，type:pie ，另外饼图的data是有包含两个键值对的json组成的数组，如下 data:[
{value:5,name:'苹果'},
{value:10,name:'李⼦'},
{value:36,name:'栗⼦'},
{value:10,name:'梨'},
{value:18,name:'草莓'},
{value:20,name:'菠萝'},
]
然后我的饼图，设置了全局颜⾊，所以看起来⽐较多彩
饼图和折线图的结合 series配置两套
series:[{
name:'销量',
type:'bar',
// data:[
// {value:5,name:'苹果'},
// {value:10,name:'李⼦'},
// {value:36,name:'栗⼦'},
// {value:10,name:'梨'},
// {value:18,name:'草莓'},
// {value:20,name:'菠萝'},
// ]
data:[5,10,36,10,18,20],
},
{
name:'销量',
type:'line',
color:'black',
// data:[
// {value:5,name:'苹果'},
// {value:10,name:'李⼦'},
// {value:36,name:'栗⼦'},
// {value:10,name:'梨'},
// {value:18,name:'草莓'},
// {value:20,name:'菠萝'},
// ]
data:[5,10,36,10,18,20], },
]。