zoukankan      html  css  js  c++  java
  • echarts折线图上下颜色渐变样式

    // 折线图
    let lineChart = echarts.init(document.getElementById('lineChart'));
    let lineOption = {
    title: {
    text: '数据接入增量趋势',
    textStyle: {
    color: '#cccccc',
    fontSize: 14
    }
    },
    tooltip : { // 悬浮提示
    trigger: 'axis',
    axisPointer: {
    type: 'cross',
    label: {
    backgroundColor: '#6a7985'
    }
    }
    },
    grid: {
    left: 5,
    right: 20,
    top: 50,
    bottom: 5,
    containLabel: true
    },
    xAxis : [
    {
    type : 'category',
    boundaryGap : false, // 是否紧贴y轴
    axisLine: { // x轴
    lineStyle: {
    color: '#606970'
    }
    },
    axisTick: { // x轴刻度
    lineStyle: {
    color: '#606970'
    }
    },
    axisLabel: { // x轴文字
    color: '#ffffff',
    fontSize: 10
    },
    data : ['4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日']
    }
    ],
    yAxis : [
    {
    name: '单位:万条',
    type: 'value',
    nameTextStyle: {
    color: '#ffffff',
    fontSize: 10,
    padding: [0, 0, 0, 0]
    },
    axisLine: { // y轴
    show: false
    },
    axisTick: { // y轴刻度
    show: false
    },
    axisLabel: { // y轴文字
    color: '#ffffff',
    fontSize: 10
    },
    splitLine: { // y轴分割线
    lineStyle: {
    color: '#606970'
    }
    },
    splitNumber: 5, // 总分隔线条数
    interval: 25 // 强制分隔单位
    }
    ],
    series : [
    {
    name:'数据接入增量',
    type:'line',
    stack: '总量',
    itemStyle: {
    color: '#5dd9da'
    },
    lineStyle: {
    color: '#5dd9da',
    0.5
    },
    areaStyle: { // 颜色自上而下渐变
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // 1代表上面
    offset: 0,
    color: '#3399fb'
    }, {
    offset: 1,
    color: '#3399cd'
    }]),
    opacity: 1 // 填充区域透明度
    },
    data:[0, 25, 50, 75, 100, 0, 25, 50, 75, 100, 0, 25]
    }
    ]
    };
    lineChart.setOption(lineOption);

  • 相关阅读:
    case when then用法
    查询后n条记录
    自定义函数
    字符函数
    数字运算符和函数
    时间日期函数
    mysql加密函数
    比较运算符和函数
    文件夹中的文件以目录的形式呈现
    错误提示:通过 Web 服务器的身份验证的用户无权打开文件系统上的文件
  • 原文地址:https://www.cnblogs.com/zhanyuefeixian/p/11739722.html
Copyright © 2011-2022 走看看