echarts零基础快速入门

第一步：得到这个dom对象。然后进行各种操作。

var myChart = echarts.init(document.getElementById('item1'));

第二步：所有的配置项全部放在 var option = {}中。

第三步就是在option中添加各种参数。如下：

color:['yellow'],
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]

格式是json格式的数据。改变颜色：直接加上color：["value"],

柱状图每个柱的间距和宽度是根据画布的百分比自动填充的。下面我们来简单的控制柱子的宽度和间距，

在series的

series: [{
name: '销量',
type: 'bar',
barWidth:"20%",//它在控制柱子的宽度。
data: [5, 20, 36, 10, 10, 20]
}]

在titile中添加：(注意添加的格式。)

title: {
show:false,//标题不显示

link:"www.baidu.com",//添加标题的链接。。(很有用)
text: 'ECharts 入门示例'
},

textAlign:'center', 调整标题的位置。这个是根据标题的位置来的。然并卵，微调还行。并不能想象中得可以让tiitle居中。想居中调整位置的话，目前用这种办法：

title: {
padding: [25, 850],
text: '作业量',

或者用这种方法：

title: {
left：'50%',
text: '作业量',

grid：网格。就是中间区域的网格。可以改变颜色。什么的。

xAxi ：直角坐标系 grid 中的 x 轴，

xAxis: {
position:"top"，

position:"bottom",
inverse:true,//反转柱的位置。

这样，就把表格底部的字体。弄到上面去。

yAxis：直角坐标系 grid 中的 y 轴，

interval:5 ，每个y轴的间隔是5个单位。

如果想做成网格状态，这句话是关键：

yAxis.splitLine.show boolean

[ default: true ]

是否显示分隔线。默认数值轴显示，类目轴不显示。

处理方法是这样。如果想要网格。这样写：

xAxis : [
{
splitLine:{show: true},//加上网格线
type : 'category',
data: ["衬衫","羊毛衫","雪纺衫","","","","","","","","","",""],
splitArea : {show : true}//保留网格区域
}
],
yAxis : [
{
splitLine:{show: true},//加上网格线
type : 'value',
splitArea : {show : true}//保留网格区域
}
],

先学这么多。就这样吧。。

巴特西

echarts零基础快速入门

最新文章

热门文章