echarts的配置项过多，翻文档很麻烦，所有放下几个经典案例参考记忆
示例1
image.png
配置项如下
var left_option = {
tooltip: { //弹窗设置
backgroundColor:'rgb(0,19,42,.7)',
borderColor:"rgba(0,0,0,0)",
textStyle:{
color:'#fff'
},
},
grid:{ //相当于图表的内边距
left:'20%',
top:'3%',
bottom:'10%'
},
yAxis: {
axisTick: { //刻度
show: false,
},
axisLine:{ //轴线
show: false,
},
axisLabel:{ //轴线上的数字样式
color:'rgb(73,193,255)'
},
data:[]
// data: ["重点疫情场所驻留人员","重点疫情场所驻留人员","重点疫情场所驻留人员","居家医学观察人员表","居家医学观察人员表","居家医学观察人员表",'居家医学观察人员表',
// '居家医学观察人员表','居家医学观察人员表']
},
xAxis: {
splitLine: { //树状线
show: true,
lineStyle:{
color:'rgb(22,63,145)',
type:'dashed',
}
},
},
series: [{
name: '销量',
barWidth: 6,
type: 'bar',
label:{ //柱状图上的数字及样式设计
show:true,
position:'right',
color:'#fff',
},
itemStyle:{
color: { //颜色渐变案例
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: 'rgb(26,138,254)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(26,138,254,0.15)' // 100% 处的颜色
}]
}
},
data: [5, 20, 36, 10, 10, 20,25,66,78]
}]
}
示例2
image.png
配置项如下
var bottom_left_option = {
legend: { //展现了不同系列的标记
show: true,
itemWidth: 10,
itemHeight: 10,
right: "0%",
textStyle: {
color: "#fff",
},
itemGap: 20,
top: "5%",
},
xAxis: {
type: "category",
axisLabel: {
color: "rgb(73,193,255)",
interval: 0,
rotate: 40,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "rgb(22,63,145)",
type: "dashed",
},
},
data: [1, 2, 3, 4, 5, 6, 7, 9, 10, 11, 12, 13, 14, 15],
},
grid: {
top: "25%",
right:'0%',
bottom: "5%",
},
tooltip: {
trigger: "axis",
backgroundColor:'rgb(0,19,42,.7)',
borderColor:"rgba(0,0,0,0)",
textStyle:{
color:'#fff'
},
},
yAxis: {
type: "value",
name: '（条）',
splitLine: {
show: true,
lineStyle: {
color: "rgb(22,63,145)",
type: "dashed",
},
},
axisLabel: {
color: "rgb(73,193,255)",
},
},
series: [
{
barWidth: 10,
data: [
333, 400, 160, 70, 78, 170, 140, 155, 254, 236, 187, 124, 220, 250, 265,
],
type: "bar",
stack: "a", //堆叠效果，数字相同则为同一组
name: "病例时空伴随人员",
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgb(26,138,254)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(26,138,254,0)", // 100% 处的颜色
},
],
},
},
},
{
barWidth: 10,
stack: "a",
name: "重点疫情场所驻留人员",
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgb(97,231,252)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(97,231,252,0)", // 100% 处的颜色
},
],
},
},
data: [
333, 400, 160, 70, 78, 170, 140, 155, 254, 236, 187, 124, 220, 250, 265,
],
type: "bar",
},
{
barWidth: 10,
stack: "a",
name: "高风险地区驻留人员",
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgb(0,238,151)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(0,238,151,0)", // 100% 处的颜色
},
],
},
},
data: [
333, 400, 160, 70, 78, 170, 140, 155, 254, 236, 187, 124, 220, 250, 265,
],
type: "bar",
},
{
barWidth: 10,
stack: "a",
name: "中风险地区驻留人员",
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgb(114,61,253)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(114,61,253,0)", // 100% 处的颜色
},
],
},
},
data: [
333, 400, 160, 70, 78, 170, 140, 155, 254, 236, 187, 124, 220, 250, 265,
],
type: "bar",
},
],
};
示例3
image.png
配置项如下
var topData = [{
name: "南昌市",
value: 456
},
{
name: "赣州市",
value: 445
},
{
name: "九江市",
value: 435
},
{
name: "吉安市",
value: 405
},
{
name: "上饶市",
value: 395
},
{
name: "抚州市",
value: 321
},
{
name: "宜春市",
value: 290
},
{
name: "萍乡市",
value: 260
},
{
name: "新余市",
value: 240
},
{
name: "鹰潭市",
value: 201
},
{
name: "景德镇市",
value: 200
},
{
name: "赣江新区",
value: 195
},
]
var myChart = echarts.init(document.getElementById('box2'));
myChart.setOption(chart(topData));
function getOption(datas) {
let maxArr = new Array(datas.length).fill(datas[0].value * 1.2);
let option = {
// backgroundColor: '#000',
// title: {
// text: '各系列销量排名',
// bottom: 5,
// left: 'center',
// textStyle: {
// color: '#fff',
// fontSize: 12,
// },
// },
color: [{
type: 'linear',
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [{
offset: 0,
color: '#61ecf7' // 0% 处的颜色
}, {
offset: 1,
color: '#1a8afe' // 100% 处的颜色
}],
}],
tooltip: {
show: true,
backgroundColor: "rgba(0,19,42,0.8)",
extraCssText: "border-radius:6px;",
borderColor: 'rgba(0,0,0,0)',
textStyle: {
color: '#fff'
},
formatter: (p) => {
return `<span style="fontSize:20px;">${p.name}</span><br>流入人数：${datas[p.dataIndex].value}`
}
},
legend: {
show: false,
},
grid: {
left: "-12%",
top: "0",
bottom: "-5%",
right: "5%",
containLabel: true,
},
xAxis: {
show: false,
type: 'value',
},
yAxis: [{
type: 'category',
inverse: true,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisPointer: {
label: {
show: false,
margin: 10,
},
},
data: datas.map((item) => item.name),
axisLabel: {
margin: 90,
fontSize: 12,
align: 'left',
color: '#fff',
rich: {
a: {
padding: [0, 0, 0, 0]
},
a1: {
color: '#fff',
backgroundColor: '#f1c029',
width: 24,
height: 24,
align: 'center',
borderRadius: 12,
padding: [2, 0, 0, 0]
},
a2: {
color: '#fff',
backgroundColor: '#c0dbf7',
width: 24,
height: 24,
align: 'center',
borderRadius: 12,
padding: [2, 0, 0, 0]
},
a3: {
color: '#fff',
backgroundColor: '#e4915c',
width: 24,
height: 24,
align: 'center',
borderRadius: 12,
padding: [2, 0, 0, 0]
},
b: {
color: '#fff',
backgroundColor: '#1e335a',
width: 24,
height: 24,
align: 'center',
padding: [2, 0, 0, 0],
borderRadius: 24,
},
},
formatter: function (params) {
var index = datas.map((item) => item.name).indexOf(params);
index = index + 1;
if (index - 1 < 3) {
return ['{a' + index + '|' + index + '}' + ' ' + '{a|' + params + '}'].join('');
} else {
return ['{b|' + index + '}' + ' ' + '{a|' + params + '}'].join('');
}
},
},
},
{
type: 'category',
inverse: true,
axisTick: 'none',
axisLine: 'none',
axisLabel: {
show: true,
margin: -20,
fontSize: 12,
color: '#fff',
inside: false,
formatter: '{value}'
},
data: datas.map((item) => item.value),
},
],
series: [{
z: 2,
name: '',
type: 'bar',
barWidth: 10,
zlevel: 1,
data: datas.map((item, i) => {
return {
value: item.value
};
}),
itemStyle: {
barBorderRadius: [20,20,20,20]
}
},
{
name: '背景',
type: 'bar',
barWidth: 10,
barGap: '-100%',
itemStyle: {
color: 'rgba(255, 255, 255, 0.08)',
barBorderRadius: [20,20,20,20]
},
data: maxArr,
animation: false
},
],
};
return option
}
自定义弹窗
formatter: function(res) { //函数方式
var result = `${res[0].name}月`
for (var i = 0; i < res.length; i++) {
result += `<br/>${res[i].seriesName}：${res[i].data}`
}
return result
}
formatter:(res)=>{
var result = res[0].axisValue
res.map(item=>{
result += `<br/>${item.seriesName}：${item.value}`
})
return result
},
自定义legend里面的icon
var icons = [
require("../../assets/images/sysjjhfx/legend-1.png"),
require("../../assets/images/sysjjhfx/legend-2.png"),
require("../../assets/images/sysjjhfx/legend-3.png"),
require("../../assets/images/sysjjhfx/legend-4.png"),
]
legend:{
show:true,
right: '0%',
textStyle:{
color:'#fff'
},
top:'5%',
itemGap: 20,
itemWidth: 12,
itemHeight: 7,
data:[
{
name:'病例时空伴随人员',
icon:'image://' + icons[0]
},
{
name:'重点疫情场所驻留人员',
icon:'image://' + icons[1]
},
{
name:'高风险地区驻留人员',
icon:'image://' + icons[2]
},
{
name:'中风险地区驻留人员',
icon:'image://' + icons[3]
},
]
},
image.png
饼图配置项
var data = [
{ value: 2, name: "提升项目" },
{ value: 4, name: "改建项目" },
{ value: 5, name: "新建项目" },
];
var pie1 = {
tooltip: {
trigger: "item",
},
legend: {
//展现了不同系列的标记
show: true,
itemWidth: 16,
itemHeight: 6,
itemGap: 30,
orient: "vertical",
right: "2%",
bottom: "25%",
textStyle:{
rich: {
name: {
color: '#333333',
fontSize: 14,
},
value: {
color: '#2769FE',
fontSize: 14,
},
percentage: {
color: '#2769FE',
fontSize: 14,
},
},
},
formatter: (name) => { //自定义图例后面的文字内容 需要外部引入一个数组
const item = data.filter((item) => item.name === name)[0];
var total = 0
data.forEach(v=>{
total+=v.value
})
data.map(v=>{
v.percentage = ((v.value/total) * 100).toFixed(2)
})
return `{name|${name}} {value|${item.value}个} {percentage|${item.percentage}%}`
},
},
series: [
{
name: "Access From",
type: "pie",
radius: ["40%", "70%"],
center: ["25%", "53%"],
avoidLabelOverlap: false,
labelLine: {
show: false,
},
label: {
show: false
},
emphasis: {
label: {
show: false
}
},
color: ["#0FCFB4", "#FF9D34", "#2769FE"],
data: [
{ value: 2, name: "提升项目" },
{ value: 4, name: "改建项目" },
{ value: 5, name: "新建项目" },
],
},
],
};
image.png
配置项
var pie4Obj = {
reportDate: "2020-09",
projectSchedule: 20,
};
function pie4(obj = pie4Obj) {
var getvalue = [70];
var option = {
title: {
text: getvalue,
textStyle: {
color: "#0FCFB4",
fontSize: 30,
},
subtext: "项目建设进度",
subtextStyle: {
color: "#666666",
fontSize: 16,
},
itemGap: 10,
left: "center",
top: "30%",
},
tooltip: {
formatter: function () {
return `<span style="color: #2769FE;line-height: 30px;">项目建设进度</span>
<br/>最新报告期： <span style="line-height: 30px;">${obj.reportDate}</span>
<br/>当前项目总进度： <span style="line-height: 30px;">${obj.projectSchedule}%</span>
`;
},
},
angleAxis: {
max: 100,
clockwise: true, // 逆时针
// 隐藏刻度线
show: false,
},
radiusAxis: {
type: "category",
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
polar: {
center: ["50%", "50%"],
radius: ["100%", "80%"],
// radius: "100%", //图形大小
},
series: [
{
type: "bar",
data: getvalue,
showBackground: true,
name: "项目建设进度",
backgroundStyle: {
color: "#EEEEEE",
},
coordinateSystem: "polar",
roundCap: true,
barWidth: 30,
itemStyle: {
normal: {
opacity: 1,
color: "#0FCFB4",
// shadowBlur: 5,
// shadowColor: "#2A95F9",
},
},
},
],
};
return option;
}
image.png
代码如下
<template>
<div>
<div class="chart" ref="chart"></div>
</div>
</template>
<script>
export default {
data() {
return {};
},
mounted() {
var topData = [
{
name: "南昌市",
value: 689,
},
{
name: "赣州市",
value: 563,
},
{
name: "九江市",
value: 458,
},
{
name: "吉安市",
value: 489,
},
{
name: "上饶市",
value: 567,
},
{
name: "抚州市",
value: 365,
},
{
name: "宜春市",
value: 159,
},
{
name: "萍乡市",
value: 205,
},
{
name: "新余市",
value: 856,
},
{
name: "鹰潭市",
value: 775,
},
]
var chart = this.$echarts.init(this.$refs.chart);
chart.setOption(this.getOption(topData));
},
methods: {
getOption(datas) {
let maxArr = new Array(datas.length).fill(datas[0].value * 1.2);
let option = {
// backgroundColor: '#000',
// title: {
// text: '各系列销量排名',
// bottom: 5,
// left: 'center',
// textStyle: {
// color: '#fff',
// fontSize: 12,
// },
// },
color: [
{
type: "linear",
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "rgba(102, 255, 61, 1)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(102, 255, 61, 1)", // 100% 处的颜色
},
],
},
],
tooltip: {
show: true,
axisPointer: {
type: "shadow",
},
trigger: "axis",
backgroundColor: "rgba(51, 51, 51, .8)",
borderColor: "rgba(0,0,0,0)",
textStyle: {
color: "#fff",
},
formatter: (p) => {
var result =`${p[0].axisValueLabel}`
result += `<br/>任务数：${p[0].data}人`;
return result
},
},
legend: {
show: false,
},
grid: {
left: "-4%",
top: "5%",
bottom: "-5%",
right: "4%",
containLabel: true,
},
xAxis: {
show: false,
type: "value",
},
yAxis: [
{
type: "category",
inverse: true,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisPointer: {
label: {
show: false,
margin: 10,
},
},
data: datas.map((item) => item.name),
axisLabel: {
margin: 60,
fontSize: 12,
align: "left",
color: "#fff",
rich: {
a: {
color: "rgba(102, 102, 102, 1)",
padding: [0, 0, 0, 0],
},
// a1: {
// color: "#fff",
// backgroundColor: "#f1c029",
// width: 14,
// height: 24,
// align: "center",
// borderRadius: 12,
// padding: [2, 0, 0, 0],
// },
// a2: {
// color: "#fff",
// backgroundColor: "#c0dbf7",
// width: 14,
// height: 24,
// align: "center",
// borderRadius: 12,
// padding: [2, 0, 0, 0],
// },
// a3: {
// color: "#fff",
// backgroundColor: "#e4915c",
// width: 14,
// height: 24,
// align: "center",
// borderRadius: 12,
// padding: [2, 0, 0, 0],
// },
b: {
color: "rgba(102, 102, 102, 1)",
},
},
formatter: function (params) {
var index = datas.map((item) => item.name).indexOf(params);
index = index + 1;
if (index - 1 < 3) {
return [
"{a|" +
params +
"}",
].join("");
} else {
return [
"{b|" +
params +
"}",
].join("");
}
},
},
},
{
type: "category",
inverse: true,
axisTick: "none",
axisLine: "none",
axisLabel: {
show: true,
margin: -70,
fontSize: 12,
color: "#fff",
inside: false,
formatter: "{value}",
},
data: datas.map((item) => item.value),
},
],
series: [
{
name: '点',
type: 'pictorialBar',
symbol: 'roundRect',
symbolSize: [2, 14],
symbolOffset: [0, 0],
z: 10,
itemStyle: {
color: '#FFFFFF',
},
symbolPosition: 'end',
data: datas.map(item=>item.value),
},
{
z: 2,
name: "",
type: "bar",
barWidth: 10,
// zlevel: 1,
data: datas.map((item, i) => {
return {
value: item.value,
};
}),
itemStyle: {
barBorderRadius: [20, 0, 0, 20],
},
},
{
name: "背景",
type: "bar",
barWidth: 10,
barGap: "-100%",
itemStyle: {
color: "rgba(255, 255, 255, 0.08)",
barBorderRadius: [20, 20, 20, 20],
},
data: maxArr,
animation: false,
},
],
};
return option;
},
},
};
</script>
<style lang="less" scoped>
.chart {
width: 615px;
height: 385px;
}
</style>
image.png
代码
var myChart = echarts.init(document.getElementById('chart'));
var options = {
color: [
"#FF2B0F",
"#FD5818",
"#FFA031",
"#F7D958",
"#66FF3D",
"#4777F5",
"#3C97E2",
"#4CDDF7",
],
grid: {
top: 0,
left: 0,
right: 0,
bottom: 0,
containLabel: true,
},
tooltip: {
trigger: "item",
backgroundColor: "rgba(0,0,0,.51)",
borderWidth: 0,
padding: 20,
textStyle: {
color: "#B7BCBB",
},
},
legend: {
top: -75,
right: 20,
width: 240,
icon: "circle",
itemWidth: 8,
itemHeight: 8,
textStyle: {
color: "#666666",
},
},
series: [{
name: "",
type: "pie",
startAngle:0,
radius: ["30%", "90%"],
center: ["40%", "20%"],
roseType: "area",
labelLine: {
show: true,
},
data: []
}],
}
let legend = [
"南昌市",
"上海市",
"杭州市",
"厦门市",
"宁波市",
"深圳市",
"北京市",
"广州市",
]
let list = [4, 9, 10, 11, 14, 15, 16, 21]
let one = legend.map((item, index) => {
return {
name: item,
value: list[index],
}
})
one.sort((a, b) => {
return b.value - a.value
})
let two = legend.map(item => {
return {
name: '',
value: 0,
labelLine: {
show: false,
},
label: {
show: false,
},
}
})
options.series[0].data = [...one,...two]
myChart.setOption(options);
