数据可视化的一个简单的小实例在这下面我就只介绍我们学习中常用的柱形图了
当然我们要导入相关的模块
<script src="echarts.min.js"></script>
<style>
.box{
width: 400px;
height: 400px;
background-color: lightblue;
position: absolute;
top: 200px;
left: 600px;
}
</style>
<body>
<div class="box">
</div>
<script>
//dom的获取及拟实例化1
var myChart = echarts.init(document.querySelector('.box'));
var option = {
//标题
title: {
text: 'ECharts 示例'
},
tooltip: {},
//柱形图代表的含义
legend: {
data: ['销量']
},
//下标
xAxis: {
data: ['ipad', '小米', '华为', 'vivo', '菠萝手机', '8848']
},
yAxis: {},
//柱形图的大小
series: [
{
name: '销量',
type: 'bar',
data: [8, 30, 36, 10, 10, 20]
}
]
};
//实例化并调用
myChart.setOption(option);
</script>
草图