Echart常用效果（一）

前端开发作者： 2024-08-19 19:30:02

代码实现 option = { backgroundColor: '#080b30', tooltip: { trigger: 'axis&#3

代码实现

option = {
    backgroundColor: '#080b30',tooltip: {
        trigger: 'axis',axisPointer: {
            lineStyle: {
                color: {
                    type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{
                        offset: 0,color: 'rgba(0,255,233,0)'
                    },{
                        offset: 0.5,color: 'rgba(255,1)',},{
                        offset: 1,0)'
                    }],global: false
                }
            },legend: {
        data: ['趋势'],itemHeight  :10,textStyle: {
            color: 'white'
        },icon: 'circle',right:0,grid: {
        top: '15%',left: '5%',right: '5%',bottom: '15%',containLabel: true
    },xAxis: [{
        type: 'category',axisLine: {
            show: false
        },axisTick: {
            show: false,splitArea: {
            color: '#f00',lineStyle: {
                color: '#f00'
            },axisLabel: {
            color: '#fff'
        },splitLine: {
            show: false
        },boundaryGap: false,data: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'
            ],}],yAxis: [{
        type: 'value',splitNumber: 4,splitLine: {
            show: true,lineStyle: {
                color: 'rgba(255,0.1)'
            }
        },axisLine: {
            show: true,axisLabel: {
            show: true,textStyle: {
                color: 'white',series: [
        {
            name: '趋势',type: 'line',smooth: true,//是否平滑
            symbol: 'none',lineStyle: {
                normal: {
                    color: "#fa517a",shadowColor: 'rgba(0,.3)',shadowBlur: 0,shadowOffsetY: 5,shadowOffsetX: 5,label: {
                show: false,position: 'top',textStyle: {
                    color: '#00ca95',}
            },itemStyle: {
                color: "#f9527d",borderColor: "#fff",borderWidth: 3,shadowOffsetY: 2,shadowOffsetX: 2,show:false,tooltip: {
                show: true
            },areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0,1,[{
                            offset: 0,color: 'rgba(250,81,122,0.3)'
                        },{
                            offset: 1,0)'
                        }
                    ],false),shadowColor: 'rgba(250,0.1)',shadowBlur: 20
                }
            },data: [632,760,980,911,922,857,712,660,999,731,768,964,888,596,423,776,992,574,629,672,757,658,885,679,813,645,988,802],]
};