代码
写一个div容器 省略。。。
js
function container3(){
var myChart =echarts.init(document.getElementById('container3'));
var option;
option = {
// title: {
// text: '单位（件）',
// position: 'left',
// textStyle: {
// color: '#ffffff', // 这里设置标题颜色为红色
// fontSize:12,
// }
//
// },
xAxis: {
type:'category',
data: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
axisLabel: {
show:true,
textStyle: {
color:'#ffffff',
},
},
},
yAxis: {
type:'value',
name:'单位（件）',
nameGap:25,//设置name的高度
position:'left',
nameTextStyle: {
color:'#ffffff' // 设置y轴名称颜色为红色
},
axisLabel: {
show:true,
textStyle: {
color:'#ffffff',
},
},
},
series: [
{
yAxisIndex:0,
data: [120,200,150,80,70,110,130],
type:'bar',
////柱子左面设置立体正方
barWidth:9,
itemStyle: {
normal: {
// //柱子左面重要的是color配置：线性渐变， 从上往下
color: {
type:"linear",
x:1,
y:0,
x2:1,
y2:1,
colorStops: [
{
offset:0,
color:"rgba(52,151,186, .8)",
},
{
offset:0.8,
color:"rgba(60,124,183, 1)",
},
],
},
},
}
// itemStyle: {
// color: '#4ab3f8' // 第一组柱子的背景颜色
// }
},
{
yAxisIndex:0,
tooltip: {
show:true,
padding:100,
position: [-10,"50%"],
borderWidth:100,
},
type:"bar",
barWidth:13,
barCategoryGap:"60%",
itemStyle: {
//柱子右面
normal: {
// 重要的是color配置：线性渐变， 从上往下
color: {
type:"linear",
x:1,
y:0,
x2:1,
y2:1,
colorStops: [
{
offset:0,
color:"#46d7f9",
},
{
offset:1,
color:" #4cb5fb",
// color: "rgba(77,175,251,0.57)",
},
],
},
borderWidth:0.3,
borderColor:"rgba(76,182,251, 0.5)",
},
},
data: [120,200,150,80,70,110,130],
// 间隔为0
barGap:0,
z:5,
},
{
yAxisIndex:0,
z:10,
// 这里是柱子的顶部，type: "pictorialBar" 可以自定义图形或者使用内置选项
type:"pictorialBar",
symbolPosition:"end",
data: [120,200,150,80,70,110,130],
symbol:"diamond",
symbolOffset: [-0.5, -12.5],
symbolRotate:90,
symbolSize: [8.5,23.6],
itemStyle: {
normal: {
borderWidth:0,
color:"rgba(69,216,249, 1)",
},
},
tooltip: {
show:false,
},
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize",function () {
myChart.resize();
});
}
