代碼
寫一個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" 可以自定義圖形或者使用內(nèi)置選項
? ? ? ? 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,
},
},
]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表苹丸。
? myChart.setOption(option);
window.addEventListener("resize",function () {
myChart.resize();
});
}
