echarts示例
问题一：如果想显示全，则需要在xAxis 属性加上axisLabel:{interval: 0}
xAxis: {
axisLabel:{interval: 0},
data: ['四季春', '奶绿', '柠檬水', '果茶', '可乐', '冰淇淋'],
axisLine:{
lineStyle:{
color:'blue',
},
},
// 负责的文本的样式
axisLabel:{
color:'white',
interval: 0
}
},
问题二：图形的颜色单/多/渐变
itemStyle:{
color:function(params){
// 多个颜色
var colorList = ['#28adfd','#ea43a3', '#BBFFAA', '#ca8622', '#BBFFAA','#749f83', '#ca8622'];
return colorList[params.dataIndex%4];//四个颜色一个循环
},
}
itemStyle:{
color:function(params){
/ / 总共颜色的一个调色版
var colorList = [
['#ffaaaa', '#aaaaff'],
['#aaaaff', '#00ff7f'],
['#92ffef', '#2398ff'],
['#712fff', '#1567ff'],
['#ff5599', '#ffaa00'],
];
//当前的颜色的变量
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);
},
}
搭配颜色可以对比色互换小技巧，如#ffffaa和#aaaaff就很好看
问题三：宽度自适应
// 浏览器的窗口发生变化时，echarts大小自适应
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">大数据可视化后台</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">
<!-- 访问数量 -->
<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"><!-- 垫图的上下层关系 --></div>
<!-- 底部信息 -->
<div class="panel news">
<div class="l li_news">
<ol class="li_news l">
<li >     图片名称<span>下载次数</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'));
// 第四步：指定容器的图表的配置项 饼状图还是柱状图 还有图里面的数据
var option1 = {
// 改变标题的数据与样式
title: {
left: 'center',
text: '奶茶店饮品销售数量',
show:true,//标题组件是否显示，默认显示
textStyle:{
color:'white',//标题变为红色
},
backgroundColor:'rgba(170,170,255,0.5)',
borderColor:'green',
},
//提示框属性
tooltip: {
// show:false,
},
legend: {
data: ['']
},
xAxis: {
axisLabel:{interval: 0},
data: ['四季春', '奶绿', '柠檬水', '果茶', '可乐', '冰淇淋'],
axisLine:{
lineStyle:{
color:'blue',
},
},
// 负责的文本的样式
axisLabel:{
// color:'white',
interval: 0,
textStyle: {
color: "white",
fontSize: "13",
},
// //设置文本值，不超过5个长度
formatter: function (value) {
return value.length >5 ? value.slice(0, 5) + "..." : value;
},
}
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [25, 20, 36, 17, 19, 20],
// 更改每一项的样式
itemStyle:{
color:function(params){
// 1单个颜色
// var colorList = ['#28adfd','#ea43a3', '#BBFFAA', '#ca8622', '#BBFFAA','#749f83', '#ca8622'];
// return colorList[params.dataIndex%4];//四个颜色一个循环
// 2渐变的颜色
// 总共颜色的一个调色版
var colorList = [
['#ffaaaa', '#aaaaff'],
['#aaaaff', '#00ff7f'],
['#92ffef', '#2398ff'],
['#712fff', '#1567ff'],
['#ff5599', '#ffaa00'],
];
//当前的颜色的变量
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);
//第一个图标END
// 第二个饼状图
var echarts2 = echarts.init(document.getElementById("demo2"));
var option2 = {
title: {
text: '单饮品客户喜好',
textStyle:{
color:'white',
fontSize:14,
},
},
//触发提示
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'],
];
//当前的颜色的变量
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);
//第二个饼状图END
// 浏览器的窗口发生变化时，echarts大小自适应
window.onresize = function() {
echarts1.resize();
echarts2.resize();
};
</script>
</body>
</html>
