eachers的网址:
定义;
1.一个可以使用javascript实现的开源可视化库。
2.依赖轻量级的矢量图像库,提供直观,交互丰富,可高度个性化定制的数据可视化图标。
3.在html中使用前要先引入js文件
<script src="./js/echarts.min.js"></script>
使用:
1.series:系列
2.tooltip:提示
3.legend:图例
4.xAxis:x轴
5.yAxis:y轴
echarts的优点:
1.国人开发,文档全。便于开发和阅读文档。
2.图标丰富,可以使用于各种各样的功能
实例:
颜色修改:
1.主题:自定义主题 linght,dark浅色与深色。
2.自定义主题
3.color:调色盘
4.itemStyle normal:默认emphasis 强调状态
实例:
特别样式:
1.渐变:
运行:
1.其中的title tootip. legend .xAxis.yAxis. series等都是固定的
<body>
<div id="container">
</div>
</body>
<script src="./js/echarts.min.js"></script>
<script>
//定义渐变
var linear = {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#02bcff' // 0% 处的颜色
}, {
offset: 1,
color: '#5555ff' // 100% 处的颜色
}],
global: false // 缺省为 false
}
//04实例化echarts
// 4.1创建—个实例
// var echart = echarts.init(document.getElementById("container"))
var echart = echarts.init(document.getElementById("container"), 'macarons')
//4.2定义配置项
var option = {
//调色盘
// color: ['#000', '#55007f', "#f70"],
//图标的标题
title: {
text: "潭总睡眠图标"
},
//图表的提示
tooltip: {},
//图例
legend: {
data: ["睡眠时长", "游戏时长", "建筑时长", "吃饭数量", ]
},
//x轴线
xAxis: {
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
},
// y轴线
yAxis: {},
// backgroundStyle: {
// color: 'rgba(0,0,255,0.2)'
// },
//设置数据
series: [{
//数据名称
name: "睡眠时长",
// 类型为柱状图
type: "bar",
//数据data
data: [8, 10, 4, 5, 9, 4, 8],
itemStyle:{
color:linear,
borderRadius:[30,30,0,0]
},
color: linear,
backgroundStyle: {
color: "rgba(180,180,180,0.2)"
},
}, {
//数据名称
name: "玩游戏时间",
//类型为柱状图
type: "line",
//数据data
data: [3, 5, 4, , 7, 6, 5, 10],
areaStyle: ["#000"]
}, {
//数据名称
name: "上课时间",
//类型为柱状图
type: "line",
smooth: true,
//数据data
data: [5, 5, 4, , 5, 6, 7, 4]
}, {
name: "成绩",
//饼形图
type: "pie",
radius: [80, 50],
//位移
left: -80,
top: -270,
//数据
data: [{
name: "谭总",
value: 90,
itemStyle: {
color: "#ffaa00",
},
}, {
name: "韩佬",
value: 80,
itemStyle: {
color: "#93da6c",
},
}, {
name: "骚哥",
value: 89
}, {
name: "康佬",
value: 63,
itemStyle: {
color: "#bcff57"
}
}, ]
}
]
}
echart.setOption(option);
</script>
执行结果: