option = {backgroundColor: '#fff', // 背景颜色title: { //标题text: '折线图示例', //主subtext: '', // 副 textStyle: { //标题样式color: '#00F6FF',fontSize: 24},subtextStyle:{ //副标题样式color: '#00F6FF',fontSize: 24},},tooltip: { //提示框组件。trigger: 'axis', //触发类型。//'item'//数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。//'axis'//坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。//在 ECharts 2.x 中只支持类目轴上使用 axis trigger，在 ECharts 3 中支持在直角坐标系和极坐标系上的所有类型的轴。并且可以通过 axisPointer.axis 指定坐标轴。//'none'//什么都不触发。axisPointer: {type: 'cross',// 指示器类型。// 'line' 直线指示器// 'shadow' 阴影指示器// 'none' 无指示器// 'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。label: {backgroundColor: '#6a7985'},lineStyle: {color: '#C02235',width: 1,type: 'dashed'}}},legend: {//一个漂浮的数据展示 可以定义样式data: ['样式1', '样式2', '样式3', '样式4', '样式5'],right:100,},toolbox: {//提示框组件。feature: {saveAsImage: {}}},grid: { // 间距是 根据x、y轴计算的；假如都是0，x、y轴的label汉字就隐藏掉了。left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category', //坐标轴类型。//可选：//'value' 数值轴，适用于连续数据。//'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。//'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。//'log' 对数轴。适用于对数数据。boundaryGap: false, //两侧距离两边的距离data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }],yAxis: [{type: 'value' //同上}],series: [ {data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',name: '样式1',itemStyle: {color: '#C02235'},lineStyle: {width: 1,},showSymbol: false,// 区域填充样式areaStyle: {color: '#F4D7DB', // 区域颜色opacity: 1, // 透明度// 渐变色// {// type: 'linear',// x: 0,// y: 0,// x2: 0,// y2: 1,// colorStops: [{// offset: 0, color: 'rgba(58,132,255, 0.5)' // 0% 处的颜色// }, {// offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色// }],// global: false // 缺省为 false// },},//emphasis: {// focus: 'series' //折线图的高亮状态。// //在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果。支持如下配置：// //'none' 不淡出其它图形，默认使用该配置。// //'self' 只聚焦（不淡出）当前高亮的数据的图形。// //'series' 聚焦当前高亮的数据所在的系列的所有图形。//},},]};
样式预览 ECharts官网
