一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。
饼图
展示内容也可以换行
把formatter: '{name|{b}}{time|{c} %}',改成formatter: '{name|{b}}\n{time|{c} %}',
改变示例位置及字颜色
legend: {
top: 'bottom',//位置底部
textStyle: {
color: '#686868'//字颜色
},
},
var optionsjzx = {
legend: {
top: 'bottom',
textStyle: {
color: '#686868'
},
},
color: ['#818DEC', '#45B7D2', '#71D294', '#E9C141', '#F38565', '#F66388'], //饼颜色
tooltip: {
trigger: 'item'//悬浮展示的内容
},
label: {
alignTo: 'edge',
formatter: '{name|{b}}{time|{c} %}',
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,//行高
rich: {
time: {
fontSize: 12,
// color: '#999'
}
}
},
series: [{
name: '',//名称
type: 'pie',
radius: [50, 90],//角度
center: ['50%', '50%'],
roseType: 'area',
data: [{
value: 16,
name: '进出港口'
},
{
value: 18,
name: '行政执法'
},
{
value: 16,
name: '案件处罚'
},
{
value: 16,
name: '渔船统计'
},
{
value: 19,
name: '外交事件'
},
{
value: 15,
name: '涉渔事件'
}
]
}]
};
var myChartsjzx = echarts.init(document.getElementById('sjzx'));
myChartsjzx.setOption(optionsjzx);
饼图效果
柱状图代码
var optionhdqytj = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
title: {},
legend: {
data: ['行政执法', '涉鱼', '其他'],
textStyle: {
color: '#7A7A7A'
},
},
xAxis: [{
type: 'category',
data: ['A区', 'B区', 'C区', 'D区'],
axisPointer: {
type: 'shadow'
},
axisLine: {
lineStyle: { //改变xy轴线条的颜色
color: "#C3DCEA",
width: 1 //这里是为了突出显示加上的
}
},
axisLabel: {
textStyle: { //改变xy轴上文字的颜色
color: "#B8B8B8"
}
}
}],
yAxis: [{
type: 'value',
// name: '单位',
interval: 100,
axisLine: {
lineStyle: { //改变xy轴线条的颜色
color: "#E5F0F6",
width: 1 //这里是为了突出显示加上的
}
},
axisLabel: {
formatter: '{value} ',
color: '#B7B7B7'
},
splitLine: {
lineStyle: { //改变xy轴线条的颜色
color: "#E5F0F6",
width: 1 //这里是为了突出显示加上的
}
},
nameTextStyle: {
color: '#B7B7B7'
}
}],
series: [{
name: '行政执法',
type: 'bar',
barWidth: 15, // 柱子宽度
tooltip: {
valueFormatter: function(value) {
return value + ' ';
}
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FFE194'
},
{
offset: 0.5,
color: '#FFE194'
},
{
offset: 1,
color: '#FFE194'
}
])
},
data: [600, 400, 700, 230, 250, 760, 135, 162, 320, 200, 600, 300]
},
{
name: '涉鱼',
type: 'bar',
barWidth: 15, // 柱子宽度
tooltip: {
valueFormatter: function(value) {
return value + ' ';
}
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#16FFFE'
},
{
offset: 0.5,
color: '#16FFFE'
},
{
offset: 1,
color: '#16FFFE'
}
])
},
data: [200, 200, 300, 400, 600, 100, 200, 230, 230, 160, 120, 610]
}, {
name: '其他',
type: 'bar',
barWidth: 15, // 柱子宽度
tooltip: {
valueFormatter: function(value) {
return value + ' ';
}
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#566FB3'
},
{
offset: 0.5,
color: '#566FB3'
},
{
offset: 1,
color: '#566FB3'
}
])
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#566FB3'
},
{
offset: 0.7,
color: '#566FB3'
},
{
offset: 1,
color: '#566FB3'
}
])
}
},
data: [100, 300, 200, 500, 300, 200, 500, 230, 210, 190, 150, 510]
}
]
};
var myCharthdqytj = echarts.init(document.getElementById('hdqytj'));
myCharthdqytj.setOption(optionhdqytj);
