第一种
<div id="pie" style=“height:200px”></div>
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('pie'));
var xData = ["UPS", "主机", "存储","网络设备"];
var yData = [13,10,9,5];
var option = {
"grid": {
"top": "25%",
"left": "-5%",
"bottom": "5%",
"right": "5%",
"containLabel": true
},
tooltip:{
show:true
},
animation: false,
"xAxis": [{
"type": "category",
"data": xData,
"axisTick": {
"alignWithLabel": true
},
"nameTextStyle": {
"color": "#82b0ec"
},
"axisLine": {
show: false,
"lineStyle": {
"color": "#82b0ec"
}
},
"axisLabel": {
"textStyle": {
"color": "#fff"
},
margin: 30
}
}],
"yAxis": [{
show: false,
"type": "value",
"axisLabel": {
"textStyle": {
"color": "#fff"
},
},
"splitLine": {
"lineStyle": {
"color": "#0c2c5a"
}
},
"axisLine": {
"show": false
}
}],
"series": [{
"name": "",
type: 'pictorialBar',
symbolSize: [40, 10],
symbolOffset: [0, -6],
symbolPosition: 'end',
z: 12,
// "barWidth": "0",
"label": {
"normal": {
"show": true,
"position": "top",
// "formatter": "{c}%"
fontSize: 25,
fontWeight: 'bold',
color: '#34DCFF'
}
},
color: "#2DB1EF",
data: yData
},
{
name: '',
type: 'pictorialBar',
symbolSize: [40, 10],
symbolOffset: [0, 7],
// "barWidth": "20",
z: 12,
"color": "#2DB1EF",
"data": yData
},
{
name: '',
type: 'pictorialBar',
symbolSize: [50, 15],
symbolOffset: [0, 12],
z: 10,
itemStyle: {
normal: {
color: 'transparent',
borderColor: '#2EA9E5',
borderType: 'solid',
borderWidth: 1
}
},
data: yData
},
{
name: '',
type: 'pictorialBar',
symbolSize: [70, 20],
symbolOffset: [0, 18],
z: 10,
itemStyle: {
normal: {
color: 'transparent',
borderColor: '#19465D',
borderType: 'solid',
borderWidth: 2
}
},
data: yData
},
{
type: 'bar',
//silent: true,
"barWidth": "40",
barGap: '10%', // Make series be overlap
barCateGoryGap: '10%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
offset: 0,
color: "#38B2E6"
},
{
offset: 1,
color: "#0B3147"
}
]),
opacity: .8
},
},
data: yData
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
第二种
<div id="barchart" style="height: 400px"></div>
// 基于准备好的dom,初始化echarts实例
var barChart = echarts.init(document.getElementById("barchart"));
var data = ["华为", "惠普", "IBM", "联想", "思科"];
var bar = ["110", "100", "70", "50", "20"];
// 绘制图表
barChart.setOption({
grid: {
left: "10%",
top: "15%",
right: "5%",
bottom: "15%",
},
legend: {
show: true,
icon: "circle",
orient: "horizontal",
top: "90.5%",
right: "center",
itemWidth: 16.5,
itemHeight: 6,
// itemGap: 30,
textStyle: {
// color: '#FFFFFF'
color: "#C9C8CD",
fontSize: 14,
},
},
xAxis: [
{
data: data,
axisLabel: {
textStyle: {
color: "#aaaaaa",
fontSize: 14,
},
margin: 30, //刻度标签与轴线之间的距离。
},
axisLine: {
show: false, //不显示x轴
},
axisTick: {
show: false, //不显示刻度
},
boundaryGap: true,
splitLine: {
show: false,
width: 0.08,
lineStyle: {
type: "solid",
color: "#03202E",
},
},
},
],
yAxis: [
{
splitLine: {
show: false,
lineStyle: {
color: "#eee",
type: "solid",
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
textStyle: {
color: "#888",
},
},
},
],
series: [
{
//柱底圆片
name: "",
type: "pictorialBar",
symbolSize: [60, 20],
symbolOffset: [0, 10],
z: 12,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(89,211,255,1)",
},
{
offset: 1,
color: "rgba(23,237,194,1)",
},
]),
},
},
data: bar,
},
//柱体
{
name: "",
type: "bar",
barWidth: 60,
barGap: "0%",
label: {
show: true,
position: "inside",
},
itemStyle: {
normal: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: "linear",
global: false,
colorStops: [
{
//第一节下面
offset: 0,
color: "rgba(0,255,245,0.5)",
},
{
offset: 1,
color: "#43bafe",
},
],
},
},
},
data: bar,
},
//柱顶圆片
{
name: "",
type: "pictorialBar",
symbolSize: [60, 20],
symbolOffset: [0, -10],
z: 12,
symbolPosition: "end",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(89,211,255,1)",
},
{
offset: 1,
color: "rgba(23,237,194,1)",
},
],
false
),
},
},
data: bar,
},
],
});