ECharts实例--柱状图

ECharts实例--柱状图

1.引入 可视化视觉库

<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

2.页面中一定要有一个具备宽高的dom元素

<div id="main"></div>

3.script，js脚本

分4步操作，如下所示：

1.抓取元素（指定图表存放的 位置）

2.初始化echarts实例

3.指定图表的配置项和数据

4.使用刚指定的配置项和数据显示图表

// 1.抓取元素（指定图表存放的 位置）
var main = document.getElementById("main");

// 2.初始化echarts实例
var myChart = echarts.init(main);
console.log(myChart);

// 3.指定图表的配置项和数据
var option = {
//title图表标题
title: {
text: '商品柱状图',
x: 'right', //水平安放位置
y: 'top', //垂直安放位置
textStyle: {
color: '#006699',
fontSize: '30', //注意，这里不要带px，否则不起作用
fontWeight: 'bolder'
}
},
//tooltip提示框
tooltip: {

},
//legend图例
legend: {
data: ['商品销量'],
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderColor: 'orange', //图例边框颜色
borderWidth: 5, //图例边框线宽
padding: 20, //图例内边距
textStyle: {
color: '#006699' //图例文字颜色
}
},
// xAxis设置图表x坐标轴
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
axisLine: {
lineStyle: {
color: 'blue', //设置x坐标轴的颜色
width: 5 //设置x坐标轴的宽度
}
},
axisLabel: {
rotate: -30 //设置x坐标轴 文本的倾斜角度
}
},
// yAxis设置图表y坐标轴
yAxis: {
axisLine: {
lineStyle: {
color: 'blue', //设置Y坐标轴的颜色
width: 5 //设置Y坐标轴的宽度
}
}
},
series: [{
name: '商品销量', // 是和图例中data中的数据要“保持一致”
type: 'bar', //图形
//柱形图默认参数 bar
// 折线图默认参数 line
// K线图默认参数 k
// 散点图默认参数 scatter
// 饼图默认参数 pie
// 雷达图默认参数 radar
data: [5, 20, 36, 10, 10, 20] // 是这 xAxis.data一一对应的
}]

};

// 4.使用刚指定的配置项和数据显示图表
//  setOption 方法生成一个简单的柱状图
myChart.setOption(option)