echarts的漸變色的設定

DDDancing發表於2019-02-28
Echarts

1.折線圖（區域）

var myChartLine = echarts.init(document.getElementById('chart1')); optionLine = { tooltip: { trigger: 'axis' }, lineStyle:{ normal:{ color:'#32A8FF' } }, areaStyle:{ normal:{ //顏色漸變函式 前四個引數分別表示四個位置依次為左、下、右、上 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

            offset: 0,
            color: 'rgba(80,141,255,0.39)'
        }, {
            offset: .34,
            color: 'rgba(56,155,255,0.25)'
        },{
            offset: 1,
            color: 'rgba(38,197,254,0.00)'
        }])

    }
},
grid: {
    left: '3%',
    right: '4%',
    bottom: '9%',
    containLabel: true
},
toolbox: {
    feature: {
        saveAsImage: {}//將統計圖儲存為
    }
    ,right:100
    ,top:0
},
xAxis: {
    type: 'category',
    boundaryGap:false,
    data:['11.07','11.08','11.09','11.10','11.11','11.12','11.13','11.14','11.15','11.16']
},
yAxis: {
    type: 'value'
    /*min:0,
     max:60,
     splitNumber:6*/
},
series: [
    {
        name:'瀏覽次數',
        type:'line',
        stack: '總量1',
        areaStyle: {normal: {}},
        data:['10','22','10','50','13','31','15','10','22','10'],
        itemStyle : {normal : {color:'#32A8FF'}}
    }
]
複製程式碼

}; //為echarts物件載入資料 myChartLine.setOption(optionLine); 效果圖

2.柱狀圖

var myChartBar = echarts.init(document.getElementById('chart2')); optionBar = { title: { x:"left", text: '興趣分佈', textStyle:{ fontSize:14 ,fontWeight:'normal' ,color:'#565656' } ,left:20 ,top:10 }, color: ['#32A8FF'], tooltip : { trigger: 'axis', axisPointer : { // 座標軸指示器，座標軸觸發有效 type : 'shadow' // 預設為直線，可選為：'line' | 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', data : ['電子商務', '消費升級', 'o2o', '網路營銷策略方案','行業報告','化妝品'], axisTick: { alignWithLabel: true } } ], yAxis : [ { type : 'value' } ], series : [ { name:'瀏覽', type:'bar', itemStyle:{ normal:{ //顏色漸變函式 前四個引數分別表示四個位置依次為左、下、右、上

                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ 
                    offset: 0,
                    color: '#508DFF'
                }, {
                    offset: 1,
                    color: '#26C5FE'
                }])

            }
        },
        data:[10, 52, 200, 334,43,87]
    }
]
複製程式碼

}; //為echarts物件載入資料 myChartBar.setOption(optionBar);

效果圖：

3.餅狀圖

var myChartPie = echarts.init(document.getElementById('chart3'));

optionPie = { title: { x:"left", text: '總使用者數', textStyle:{ fontSize:14 ,fontWeight:'normal' ,color:'#565656' } ,left:20 ,top:10 }, tooltip: { trigger: 'item', formatter: "{a}
{b}: {c} ({d}%)" }, legend: { data:['會員','作者'], color:['#32A8FF',' #02C800'], orient:'vertical' ,right:20 ,top:10 ,textStyle:{ color:['#32A8FF',' #02C800'] } ,itemWidth:14 }, series: [ { name:'使用者總數1200', type:'pie', radius:['55%','70%'], avoidLabelOverlap:false, color:['#32A8FF',' #02C800'], data:[{value:43535,name:'會員',itemStyle:{ normal:{ color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //顏色漸變函式 前四個引數分別表示四個位置依次為左、下、右、上

                    offset: 0,
                    color: '#508DFF'
                }, {
                    offset: 1,
                    color: '#26C5FE'
                }])
            }
        }},{value:5667,name:'作者',itemStyle:{
            normal:{
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //顏色漸變函式 前四個引數分別表示四個位置依次為左、下、右、上

                    offset: 0,
                    color: '#63E587'
                }, {
                    offset: 1,
                    color: '#5FE2E4'
                }])
            }
        }}]
    }
]
複製程式碼

}; //為echarts物件載入資料 myChartPie.setOption(optionPie);

效果圖：

4.地圖

var myChartMap = echarts.init(document.getElementById('chart4')); function randomData() { return Math.round(Math.random()*1000); } optionMap = { title: { x:"left", text: '省份分佈', textStyle:{ fontSize:14 ,fontWeight:'normal' ,color:'#565656' } ,left:20 ,top:10 }, tooltip: { trigger: 'item' ,formatter:'{b}
瀏覽量：{c}' },

visualMap: {
    min: 0,
    max: 2500,
    left:20,
    bottom:10,
    text: ['高','低'],// 文字，預設為數值文字
    color:['#20a0ff','#D2EDFF'],
    calculable: false
},
series: [
    {
        type: 'map',
        mapType: 'china',
        roam: false,
        data:[
            {name: '北京',value: randomData() },
            {name: '天津',value: randomData() },
            {name: '上海',value: randomData() },
            {name: '重慶',value: randomData() },
            {name: '河北',value: randomData() },
            {name: '安徽',value: randomData() },
            {name: '新疆',value: randomData() },
            {name: '浙江',value: randomData() },
            {name: '江西',value: randomData() },
            {name: '山西',value: randomData() },
            {name: '內蒙古',value: randomData() },
            {name: '吉林',value: randomData() },
            {name: '福建',value: randomData() },
            {name: '廣東',value: randomData() },
            {name: '西藏',value: randomData() },
            {name: '四川',value: randomData() },
            {name: '寧夏',value: randomData() },
            {name: '香港',value: randomData() },
            {name: '澳門',value: randomData() }
        ]
    }
]
複製程式碼

}; //為echarts物件載入資料 myChartMap.setOption(optionMap);

效果圖：

相關文章