目录
ECharts基本使用
1、首先在文件中引入ECharts的依赖包
可以通过 BootCDN安装BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
<!-- 引入echarts依赖包 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.common.js"></script>2、准备一个容器：
然后就可以通过?echarts.init?方法初始化一个 echarts 实例并通过?setOption?方法生成一个简单的柱状图，下面是完整代码。
各种配置项可以查官网的手册：Documentation - Apache ECharts
// 基于准备好的dom，初始化echarts实例
var dom = document.querySelector('div')
var myChart = echarts.init(dom);
// 指定图表的配置项和数据
var option = {
//主标题的设置
title: {
text: 'ECharts 入门示例',
subtext:'数据可视化'
},
legend: {
data: ['销量']
},
//x轴配置项
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
//y轴配置项
yAxis: {
//显示y轴的线
axisLine:{
show:true
},
axisTick:{
show:true
}
},
//系列的设置：绘制什么类型的图表type、数据在这里展示
series: [
{
name: '销量',
//图标类型的设置
type: 'bar',
//图标的数据
data: [5, 20, 36, 10, 10, 20],
color:'red'
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
ECharts展示多个图表
?只需要准备两个容器?
<body>
<div class="box1"></div>
<div class="box2"></div>
</body> // 基于准备好的dom，初始化echarts实例
var dom1 = document.querySelector('.box1')
var dom2 = document.querySelector('.box2')
var myChart1 = echarts.init(dom1);
var myChart2 = echarts.init(dom2);
// 第一个省略
//第二个图表
myChart2.setOption({
//主标题的设置
title: {
text: '折线图',
left:'center',
textStyle:{
color:'blue'
},
subtext:'翘阳啦',
shutextStyle:{
color:'cyan'
}
},
xAxis:{
data:['星期一','星期二','星期三','星期四','星期五']
},
yAxis:{},
//图表类型与数据
series:[
{
type:'line',
data:[10,25,53,21,13]
}
]
})
ECharts一个容器展示多个图表
?只需要在series里设置多个类型的图表即可：
series: [
//柱状图
{
name: '销量',
//图表类型的设置
type: 'bar',
//图表的数据
data: [5, 20, 36, 10, 10, 20],
color:'red'
},
//折线图
{
//图表类型的设置
type: 'line',
//图表的数据
data: [5, 20, 36, 10, 10, 20],
color:'blue'
},
//饼图
{
//图表类型的设置
type: 'pie',
//饼图可以显示文字，data写法如下
data: [{name:'衬衫',value:5},{name:'羊毛衫',value:20},{name:'雪纺衫',value:36},{name:'裤子',value:10},{name:'高跟鞋',value:10},{name:'袜子',value:20},],
//饼图的宽度和高度
width:150,
height:150,
//饼图的位置
left:120,
top:50,
//饼图的半径
radius:25
}
]
ECharts数据集dataset的使用
先把数据放到data中：
第一个为x轴数据，第二个为柱状图数据，第三个为折线图数据，第四个为饼图的文字，第五个为饼图的数据
let data =[
["衬衫",5,5,"衬衫",5],
["羊毛衫",20,20,"羊毛衫",20],
["雪纺衫",36,36,"雪纺衫",36],
["裤子",10,10,"裤子",10],
["高跟鞋",10,10,"高跟鞋",10],
["袜子",20,20,"袜子",20],
]需要再下面的series里配置encode属性：
对象里的y代表图表数据为data数据集中的索引y
饼图里要说明itemName和value的索引，分别代表饼图的文字和数据
//x轴配置项
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
//y轴配置项
yAxis: {
//显示y轴的线
axisLine:{
show:true
},
axisTick:{
show:true
}
},
//系列的设置：绘制什么类型的图表type、数据在这里展示
series: [
//柱状图
{
name: '销量',
//图标类型的设置
type: 'bar',
//图标的数据
// data: [5, 20, 36, 10, 10, 20],
color:'red',
encode:{
y:1
}
},
//折线图
{
//图标类型的设置
type: 'line',
//图标的数据
//data: [5, 20, 36, 10, 10, 20],
color:'blue',
encode:{
y:2
}
},
//饼图
{
//图标类型的设置
type: 'pie',
//饼图可以显示文字，data写法如下
// data: [{name:'衬衫',value:5},{name:'羊毛衫',value:20},{name:'雪纺衫',value:36},{name:'裤子',value:10},{name:'高跟鞋',value:10},{name:'袜子',value:20},],
//饼图的宽度和高度
width:150,
height:150,
//饼图的位置
left:120,
top:50,
//饼图的半径
radius:25,
encode:{
//饼图旁边的文字
itemName:3,
value:4
}
}
]
?