echarts引用的简单步骤
首先导入echarts的包 <script src = "js/echarts.min.js"></script>
<style>
.box{
width:300px;
height:300px;
background:lightgreen;
}
</style>
<body >
<div class="box"></div> //设置一个div用来做放置图表的容器。
<script>
//1.echarts初始化。
var myChart = echarts.init(document.querySelector(".box"));
//2.设置图表配置项
var option = {
xAxis: {
type: 'category', //该部分可从echarts官网来获得option内的代码。
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
}]
};
myChart.setOption(option); //配置
</script>
</body>
