不用多說都在注釋里了穿挨，直接上代碼
option = {
? ? title: {
? ? ? ? text: '堆疊區(qū)域圖' // 標(biāo)題欄
? ? },
? ? tooltip: { // 提示框
? ? ? ? trigger: 'axis', // 觸發(fā)類型
? ? ? ? axisPointer: { // 坐標(biāo)軸指示器配置項(xiàng)
? ? ? ? ? ? type: 'cross',
? ? ? ? ? ? label: {
? ? ? ? ? ? ? ? backgroundColor: '#6a7985'
? ? ? ? ? ? }
? ? ? ? }
? ? },
? ? legend: { // 圖例組件
? ? ? ? orient: 'horizontal', // 圖例列表的布局朝向
? ? ? ? right: 1, // 圖例組件離容器右側(cè)的距離
? ? ? ? textStyle: {
? ? ? ? ? ? color: '#6e6e6e', // 字體顏色
? ? ? ? ? ? fontWeight: 'normal',
? ? ? ? ? ? fontSize: 12
? ? ? ? },
? ? ? ? data: ['郵件營(yíng)銷'] // 和series 中的name對(duì)應(yīng)
? ? },
? ? grid: { //? 直角坐標(biāo)系內(nèi)繪圖網(wǎng)格
? ? ? ? left: '3%',
? ? ? ? top: '15%',
? ? ? ? containLabel: true
? ? },
? ? xAxis: [{
? ? ? ? type: 'category',
? ? ? ? boundaryGap: false,
? ? ? ? axisLabel: {
? ? ? ? ? ? show: true,
? ? ? ? ? ? textStyle: {
? ? ? ? ? ? ? ? color: '#8a94a3' // 坐標(biāo)字體顏色
? ? ? ? ? ? },
? ? ? ? ? ? rotate: 20 // 坐標(biāo)傾斜角度
? ? ? ? },
? ? ? ? axisLine: {
? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? ? color: '#bdc7da', // x坐標(biāo)軸顏色
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? data: ['06-22', '06-22', '06-22', '06-22', '06-22', '06-22', '06-22']
? ? }],
? ? yAxis: {
? ? ? ? type: 'value',
? ? ? ? axisLine: { //坐標(biāo)軸線條相關(guān)設(shè)置(顏色等)
? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? ? color: '#babced' // y軸顏色
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? axisLabel: {
? ? ? ? ? ? formatter: '{value}',
? ? ? ? ? ? textStyle: {
? ? ? ? ? ? ? ? color: '#babced'
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? splitLine: {
? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? ? color: '#57617B' //分隔線顏色設(shè)置
? ? ? ? ? ? }
? ? ? ? }
? ? },
? ? series: [{
? ? ? ? name: '郵件營(yíng)銷',
? ? ? ? type: 'line',
? ? ? ? symbol: 'circle', //標(biāo)記的圖形
? ? ? ? symbolSize: 10, // 拐點(diǎn)的大小
? ? ? ? label: {
? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? show: true,
? ? ? ? ? ? ? ? color: '#4a9eff', // 數(shù)字顏色
? ? ? ? ? ? ? ? position: 'top'
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? itemStyle: {
? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? borderColor: 'red', // 邊框顏色
? ? ? ? ? ? ? ? color: '#fafafa', // 折線上標(biāo)記點(diǎn)的顏色 和 圖例的顏色
? ? ? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? ? ? ? width: 4, //? 折線圖的粗細(xì)
? ? ? ? ? ? ? ? ? ? color: '#4a9eff' // 折線的顏色
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? areaStyle: {
? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? type: 'default',
? ? ? ? ? ? ? ? color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
? ? ? ? ? ? ? ? ? ? offset: 0,
? ? ? ? ? ? ? ? ? ? color: '#4a9eff' // 區(qū)域顏色
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? offset: 1,
? ? ? ? ? ? ? ? ? ? color: '#4a9eff' // 區(qū)域顏色
? ? ? ? ? ? ? ? }], false)
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? data: [820, 932, 901, 934, 1290, 1330, 1320]
? ? }]
};
效果圖：
