echarts示例
問題一：如果想顯示全，則需要在xAxis 屬性加上axisLabel:{interval: 0}
xAxis: {
axisLabel:{interval: 0},
data: ['四季春', '奶綠', '檸檬水', '果茶', '可樂', '冰淇淋'],
axisLine:{
lineStyle:{
color:'blue',
},
},
// 負(fù)責(zé)的文本的樣式
axisLabel:{
color:'white',
interval: 0
}
},
問題二：圖形的顏色單/多/漸變
itemStyle:{
color:function(params){
// 多個(gè)顏色
var colorList = ['#28adfd','#ea43a3', '#BBFFAA', '#ca8622', '#BBFFAA','#749f83', '#ca8622'];
return colorList[params.dataIndex%4];//四個(gè)顏色一個(gè)循環(huán)
},
}
itemStyle:{
color:function(params){
/ / 總共顏色的一個(gè)調(diào)色版
var colorList = [
['#ffaaaa', '#aaaaff'],
['#aaaaff', '#00ff7f'],
['#92ffef', '#2398ff'],
['#712fff', '#1567ff'],
['#ff5599', '#ffaa00'],
];
//當(dāng)前的顏色的變量
var colorItem = colorList[params.dataIndex%5];
return new echarts.graphic.LinearGradient(0, 0, 0,1, [{
offset: 0,
color: colorItem[0]},
offset: 1,
color: colorItem[1]},
], false);
},
}
搭配顏色可以對(duì)比色互換小技巧，如#ffffaa和#aaaaff就很好看
問題三：寬度自適應(yīng)
// 瀏覽器的窗口發(fā)生變化時(shí)，echarts大小自適應(yīng)
window.onresize = function() {
echarts1.resize();
};
餅狀圖
<!DOCTYPE html>
<html style="font-size:300px;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
</style>
<script src="../js/flexible.min.js"></script>
<script src="../js/echarts.min.js"></script>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div class="demo"></div>
<div class="header">大數(shù)據(jù)可視化后臺(tái)</div>
<!-- 中間的盒子 -->
<div class="box">
<div class="l echarts">
<div class="panel">
<div class="line"></div>
<div class="box_charts" id="demo1"></div>
</div>
<div class="panel">
<div class="line"></div>
<div class="box_charts" id="demo2"></div>
</div>
</div>
<!-- 中間 -->
<div class="l info">
<div class="blight">
<!-- 訪問數(shù)量 -->
<ul class="num">
<li>8</li><li>6</li><li>0</li><li>5</li><li>1</li><li>4</li>
</ul>
<div class="ball "></div>
<!-- <img src="../img/bg_ball.png" alt=""> -->
<!-- <img src="../img/bg_light_line.png" alt=""> -->
<div class="ball balline"><!-- 墊圖的上下層關(guān)系 --></div>
<!-- 底部信息 -->
<div class="panel news">
<div class="l li_news">
<ol class="li_news l">
<li >     圖片名稱<span>下載次數(shù)</span></li>
<li><img src="../../pro2/img/icon_1.png" alt="">孤寡孤寡孤寡咕咕咕咕咕咕過過
<span>123</span>
</li>
<li><img src="../../pro2/img/icon_2.png" alt="">孤寡孤咕咕咕咕咕咕過過
<span>1234</span>
</li>
<li><img src="../../pro2/img/icon_3.png" alt="">孤寡孤寡孤寡咕咕咕咕咕咕過過
<span>1236</span>
</li>
<li><img src="../../pro2/img/icon_4.jpg" alt="">孤寡孤寡孤寡咕咕咕咕咕咕過過
<span>1237</span>
</li>
</ol>
</div>
<div class="news_r r">
hezi
</div>
</div>
</div>
</div>
<!-- 右邊 -->
<div class="l echarts">
<div class="panel">
<div class="line"></div>
</div>
<div class="panel">
<div class="line"></div>
</div>
</div>
<div class="c echarts">
</div>
</div>
<script>
var echarts1 = echarts.init(document.getElementById('demo1'));
// 第四步：指定容器的圖表的配置項(xiàng) 餅狀圖還是柱狀圖 還有圖里面的數(shù)據(jù)
var option1 = {
// 改變標(biāo)題的數(shù)據(jù)與樣式
title: {
left: 'center',
text: '奶茶店飲品銷售數(shù)量',
show:true,//標(biāo)題組件是否顯示，默認(rèn)顯示
textStyle:{
color:'white',//標(biāo)題變?yōu)榧t色
},
backgroundColor:'rgba(170,170,255,0.5)',
borderColor:'green',
},
//提示框?qū)傩? tooltip: {
// show:false,
},
legend: {
data: ['']
},
xAxis: {
axisLabel:{interval: 0},
data: ['四季春', '奶綠', '檸檬水', '果茶', '可樂', '冰淇淋'],
axisLine:{
lineStyle:{
color:'blue',
},
},
// 負(fù)責(zé)的文本的樣式
axisLabel:{
// color:'white',
interval: 0,
textStyle: {
color: "white",
fontSize: "13",
},
// //設(shè)置文本值，不超過5個(gè)長度
formatter: function (value) {
return value.length >5 ? value.slice(0, 5) + "..." : value;
},
}
},
yAxis: {},
series: [
{
name: '銷量',
type: 'bar',
data: [25, 20, 36, 17, 19, 20],
// 更改每一項(xiàng)的樣式
itemStyle:{
color:function(params){
// 1單個(gè)顏色
// var colorList = ['#28adfd','#ea43a3', '#BBFFAA', '#ca8622', '#BBFFAA','#749f83', '#ca8622'];
// return colorList[params.dataIndex%4];//四個(gè)顏色一個(gè)循環(huán)
// 2漸變的顏色
// 總共顏色的一個(gè)調(diào)色版
var colorList = [
['#ffaaaa', '#aaaaff'],
['#aaaaff', '#00ff7f'],
['#92ffef', '#2398ff'],
['#712fff', '#1567ff'],
['#ff5599', '#ffaa00'],
];
//當(dāng)前的顏色的變量
var colorItem = colorList[params.dataIndex%5];
return new echarts.graphic.LinearGradient(0, 0, 0,1, [{
offset: 0,
color: colorItem[0]},
{
offset: 1,
color: colorItem[1]},
], false);
},
}
}
]
};
echarts1.setOption(option1);
//第一個(gè)圖標(biāo)END
// 第二個(gè)餅狀圖
var echarts2 = echarts.init(document.getElementById("demo2"));
var option2 = {
title: {
text: '單飲品客戶喜好',
textStyle:{
color:'white',
fontSize:14,
},
},
//觸發(fā)提示
tooltip: {
trigger: 'item'
},
legend: {
top: '11%',
left: 'center',
textStyle:{
color:'#fff',
}
},
series: [
{
name: '喜愛值',
type: 'pie',
radius: ['40%', '60%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius:2,
// borderColor: '#fff',
borderWidth: 2,
color:function(params){
var colorList = [
['#55ffff', '#2398ff'],
['#712fff', '#1567ff'],
['#ff5599', '#ffaa00'],
];
//當(dāng)前的顏色的變量
var colorItem = colorList[params.dataIndex%3];
return new echarts.graphic.LinearGradient(0, 0, 0,1, [{
offset: 0,
color: colorItem[0]},
{
offset: 1,
color: colorItem[1]},
], false);
},
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 17, name: '咖啡' },
{ value: 33, name: '奶茶' },
{ value: 50, name: '果茶' },
]
}
]
};
echarts2.setOption(option2);
//第二個(gè)餅狀圖END
// 瀏覽器的窗口發(fā)生變化時(shí)，echarts大小自適應(yīng)
window.onresize = function() {
echarts1.resize();
echarts2.resize();
};
</script>
</body>
</html>
