echarts引入及应用

时间:2023-03-10 06:46:58
echarts引入及应用

1.在官网上下载echarts并引入项目中

<script src="js/echarts.js"></script>

2.给一个DOM作为图表展示的容器,必须有width和height,且这两项必须写在DOM里。

<div class="container" id="main" style="width: 1000px;height: 1000px">

3.初始化echarts,定义option作为数据的容器,初始化后的myCharts.setOption(option);

var myChart = echarts.init(document.getElementById('main'));//初始化
var option = {
};
myChart.setOption(option);

4.具体参数变量设置可参照api及相关书籍,如《ECharts-HowTo》

5.部分样式修改展示

series: [{
name: '监控项',
type: 'bar',
data: [120, 230, 503,183,435,288],
barWidth : 30,//设置柱条宽度
itemStyle:{ //设置柱条颜色
normal:{
color:'rgba(251,110,82,1)'
} }
}]