echarts学习笔记

折线图基本配置

  
  
var option = {
title: {
text: '示例' //标题
},
tooltip: {
trigger: 'axis' //触发类型,默认('item')数据触发,可选为:'item' | 'axis'
},
legend: { //图例,每个图表最多仅有一个图例
data: [ '销量', '销量2'],
show: true //显示策略,可选为:true(显示) | false(隐藏),默认值为true
},
xAxis: {
type: 'category',
data: [ "1月", "2月", "3月", "4月", "5月", "6月"],
name: "月份",
boundaryGap: true,
axisLabel: {
interval: 0, //横轴信息全部显示
rotate: - 30, //-30度角倾斜显示
}
},
yAxis: {
type: "value",
name: "总量"
},
series: [{ //直角坐标系中横轴数组,数组中每一项代表一条横轴坐标轴,仅有一条时可省略数值
//横轴通常为类目型,但条形图时则横轴为数值型,散点图时则横纵均为数值型
name: '销量',
type: 'line', //折线类型
symbol: 'star', //拐点样式
symbolSize: 8, //拐点大小
data: [ 5, 20, 36, 10, 10, 20],
itemStyle: {
normal: {
color: 'blue', //拐点颜色
lineStyle: { //折线样式
color: 'red', //折线颜色
width: 10官网链接
}
}
}
}, {
name: '销量2',
type: 'line',
symbol: 'star', //拐点样式
symbolSize: 8, //拐点大小
data: [ 20, 36, 10, 10, 20, 5],
itemStyle: {
normal: {
color: 'blue',
lineStyle: {
color: '#00FF00',
width: 10
}
}
}
}]
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值