提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
echarts横向柱状图
一个简单的样式
一、样式?
示例:样式其实一样就是改了颜色
二、使用步骤
1.引入库
代码如下(示例):
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="test/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="test/js/bootstrap.min.js"></script>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js" ></script>
2.html+js
代码如下(示例):
<div id="rtleft" style="float: left;height: 100%;width: 420px;margin-left: 20px;margin-top: -50px;"></div>
<!--右上靠左-->
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('rtleft'));
// 指定图表的配置项和数据
var option = {
dataset: {
source: [
['score', 'amount', 'product'],
[89.3, 58212, '业务员1'],
[57.1, 78254, '业务员2'],
[74.4, 41032, '业务员3'],
[50.1, 12755, '业务员4'],
[52.1, 12055, '业务员6'],
]},
grid: {containLabel: true},
xAxis: {name: 'amount',
show:false},
yAxis: {
inverse:true,
type: 'category',
axisLine:{
show:false,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color:'#fff' //这里用参数代替了
}
},
},
series: [{
type: 'bar',
encode: {
// Map the "amount" column to X axis.
x: 'amount',
// Map the "product" column to Y axis
y: 'product'
},
itemStyle: {
//通常情况下:
normal: {
barBorderRadius: 20,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#2cccfd'
}, {
offset: 1,
color: '#fc5a5a'
}]),
shadowColor: 'rgba(0, 0, 0, 0.4)',
shadowBlur: 20
},
},
label: {
show: true, //开启显示
position: 'right', //在上方显示
textStyle: { //数值样式
color: '#fff',
fontSize: '12'
}
},
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
LinearGradient()用来控制家变色及方向后面的四个数控制方向,具体自己百度
总结
拿走的朋友说一下我看看到底帮到了多少人,谢谢了,我还是菜得离谱。