最近由于项目需求 要学习一段echarts 数据可视化 ,不得不说echarts的各种组件还是非常强大的,不过面临头疼的也是 他强大的API 实在太多的属性 所以在这汇总下个人在使用中常用的配置
这里附上百度Ecahrts 官方api 感兴趣学习的小伙伴可以去研究下:
https://echarts.baidu.com/option.html#title
1.折线图常用命令:
//根据第获取元素
var dom = document.getElementById("bottom_02");
//加载echarts组件
var myChart = echarts.init(dom);
var app = {};
//折线图数据源
var data_line={
//x轴显示数据
xAxis:['2013','2014','2015','2016','2017','2018'],
//y轴单位值
yAxis:'(万吨)',
seriesData:[100, 200, 320,300,250,190]
};
option = null;
option = {
//grid属性用于设置图标在div中的位置
grid: {
//距离上边框的距离(以下依次)
top:'18%',
left: '2%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
//'type':x轴显示数值类型 通常为category
type: 'category',
boundaryGap: false,
data: data_line.xAxis,
//设置坐标轴的轴线
axisTick: {
show: false
},
//设置坐标轴刻度属性
axisLine: {
show: true,
//设置刻度的样式
lineStyle:{
color:'#FFFFFF'
}
},
},
yAxis: {
//跟xAxis相呼应 一个显示类目,一个显示数值
type: 'value',
boundaryGap: false,
name:data_line.yAxis,
data:data_line.seriesData,
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle:{
color:&