双立体柱状图
示意图：
配置：
initData() {
let sideData = [220, 182, 191, 234, 290, 330]
let sideData1 = [100, 110, 120, 134, 190, 230]
let nameList = ['结算能力数', '结算金额']
let yAxisData = ['(金额/亿元)', '(能力数/个)']
let xData = ['1', '2', '3', '4', '5', '6']
this.initEchartsDom(sideData, sideData1, xData, nameList, yAxisData)
},
/**
*
* @param {*} sideData:蓝色柱状图的数据
* @param {*} sideData1 ：绿色柱状图的数据
* @param {*} xData 横坐标数据
* @param {*} nameList ：柱状图的名称对应着图例，[蓝色的，绿色的]
* @param {*} yAxisData ：yAxis配置，如果length>1，则设置两个纵坐标，并且第二个柱状图yAxisIndex为1
*/
initEchartsDom(sideData, sideData1, xData, nameList, yAxisData) {
const name1 = nameList[0];
const name2 = nameList[1];
let x = xData;
// 通用的yAxis属性
let yAxisCommonSetting = {
nameTextStyle: {
color: "rgba(216,240,255,0.6)",
fontSize: 10
},
type: 'value',
axisLabel: {
formatter: "{value}",
textStyle: {
color: "rgba(216,240,255,0.6)",
fontSize: 10
}
},
}
//根据yAxisData配置yAxis
let yAxis = [{
name: yAxisData[0],
...yAxisCommonSetting,
splitLine: {
show: true, // 是否显示分隔线。默认数值轴显示，类目轴不显示
lineStyle: {
type: 'dashed',
color: 'rgba(208,222,238,0.20)',
width: 1 // 设置分割线的粗细为2
}
}
}]
if (yAxisData.length > 1) {
yAxis.push({
name: yAxisData[1],
...yAxisCommonSetting,
position: "right",
splitLine: {
show: false
},
})
}
let option = {
legend: {
position: "top",
show: true,
align: "right",
itemWidth: 12,
itemHeight: 8,
textStyle: {
color: '#C0E7FF',
fontSize: 10
},
},
grid: {
top: 35,
left: 20,
right: 20,
bottom: 10,
containLabel: true
},
toolbox: {
show: true,
},
calculable: true,
xAxis: [
{
type: 'category',
axisLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#2a3853',
width: 2
}
},
axisTick: {
show: false
},
data: x,
axisLabel: {
color: 'rgba(216,240,255,0.6)',
fontSize: 10,
rotate: 0,
margin: 10,
clickable: true,
formatter: function (value) {
if (value.length > 8) {
// 文本超长后换行
return value.substr(0, 8) + '..'
} else {
return value
}
},
}
}
],
yAxis: yAxis,
series: [
{
name: name1,//左侧
tooltip: {
show: false
},
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "rgba(26,102,255,0)" // 0% 处的颜色
}, {
offset: 1,
color: "rgba(30,147,188,1)", // 100% 处的颜色
}], false)
}
},
data: sideData,
barGap: 0,
},
{
name: name1,
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "rgba(51,173,234,0)" // 0% 处的颜色
}, {
offset: 1,
color: "rgba(7,195,237,0.8)", // 100% 处的颜色
}], false)
}
},
barGap: 0,
data: sideData,
label: {
show: false,
position: 'top',
textStyle: {
color: 'white',
fontSize: 10
}
}
}, {
data: sideData,
type: "pictorialBar",
barMaxWidth: "20",
symbolPosition: "end",
symbol: "diamond",
symbolOffset: ['-13', "-6"],
symbolSize: [21, 12],
zlevel: 2,
itemStyle: {
color: '#3ed5f7' // 顶部方块的颜色
},
},
// 中间跟背景颜色一样的一个柱子，将两个立体柱子分开
{
name: name1,
type: 'bar',
barWidth: 6,
tooltip: {
show: false
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "rgba(0,30,61, 0)" // 0% 处的颜色
}, {
offset: 1,
color: "rgba(0,30,61, 0)", // 100% 处的颜色
//opacity:0.5
}], false)
}
},
barGap: 0,
data: sideData,
label: {
show: false,
position: 'top',
textStyle: {
color: 'white',
fontSize: 10
}
}
},
// 第二个柱状图
{
name: name2,
yAxisIndex: 1,
tooltip: {
show: false
},
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "rgba(26,102,255,0)" // 0% 处的颜色
}, {
offset: 1,
color: "rgba(32,167,24,1)", // 100% 处的颜色
}], false)
}
},
data: sideData1,
barGap: 0,
},
{
name: name2,
type: 'bar',
barWidth: 10,
yAxisIndex: 1,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "rgba(51,173,234,0)" // 0% 处的颜色
}, {
offset: 1,
color: "rgba(24,203,125,0.8)", // 100% 处的颜色
}], false)
}
},
barGap: 0,
data: sideData1,
label: {
show: false,
position: 'top',
textStyle: {
color: 'white',
fontSize: 10
}
}
},
// 顶部方块
{
data: sideData1,
type: "pictorialBar",
barMaxWidth: "20",
yAxisIndex: 1,
symbolPosition: "end",
symbol: "diamond",
symbolOffset: ['13', "-6"],
symbolSize: [21, 12],
zlevel: 2,
itemStyle: {
color: '#73F539' // 顶部方块的颜色
},
},
]
};
this.initEchart(this.$refs.echartsDom, option, 'echartsDom');
},
// 初始化图表
initEchart(ref, option, name) {
const myChart = echarts.init(ref);
myChart.setOption(option, true);
this[name] = myChart;
}
立体圆柱形柱状图及折线图
示意图：
配置：
// 左侧的图
initOrderingTrend() {
let xAxisData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
let seriesData = [150, 140, 150, 270, 230, 250, 130, 110, 230, 220, 260, 240]
let seriesData1 = [150, 180, 190, 170, 160, 200, 240, 250, 210, 160, 180, 200]
let seriesData2 = [40, 45, 47, 48, 62, 70, 82, 78, 70, 68, 62, 69]
let seriesName = ['每月能力订单数', '年度累计订单数', '同比增长率']//折线图名称,柱状图名称,橘色折线图名称
let yAxisName = ['(订单数/个)', '(增长率/%)']//两侧纵坐标的名称
let option = this.getBarOption(xAxisData, seriesData, seriesData1, seriesData2, seriesName, yAxisName);
this.initEchart(this.$refs.orderingTrend, option, 'orderingTrend');
},
//获取圆柱形柱状图option
getBarOption(xAxisData, seriesData, seriesData1, seriesData2, seriesName, yAxisName) {
return {
xAxis: {
type: 'category',
data: xAxisData,
axisLine: {
show: false
},
axisTick: {
show: false
},
triggerEvent: true,
axisLabel: {
color: '#B8D3F1',
fontSize: 10,
rotate: 0,
margin: 10,
clickable: true,
formatter: function (value) {
if (value.length > 8) {
// 文本超长后换行
return value.substr(0, 8) + '..'
} else {
return value
}
},
}
},
grid: {
top: 35,
left: 20,
right: 20,
bottom: 10,
containLabel: true
},
legend: {
show: true,
align: "right",
itemWidth: 12,
itemHeight: 8,
textStyle: {
color: '#C0E7FF',
fontSize: 10
},
},
yAxis: [
{
type: "value",
name: yAxisName[0],
min: 0,
position: "left",
axisLabel: {
formatter: "{value}",
textStyle: {
color: "#B8D3F1",
fontSize: 10
}
},
nameTextStyle: {
color: "#B8D3F1",
fontSize: 10,
},
// max: maxY,
axisTick: {
show: false,
},
splitLine: {
show: false,
},
},
{
type: "value",
max: 100,
name: yAxisName[1],
min: 0,
nameTextStyle: {
color: "#B8D3F1",
fontSize: 10
},
axisTick: {
show: false,
},
position: "right",
axisLabel: {
formatter: "{value}",
textStyle: {
color: "#B8D3F1",
fontSize: 10
}
},
splitLine: {
show: true, // 是否显示分隔线。默认数值轴显示，类目轴不显示
lineStyle: {
type: 'solid',
color: 'rgba(87,206,234,0.1)',
width: 1 // 设置分割线的粗细为2
}
}
},
],
tooltip: {
trigger: 'axis',
renderMode: "html",
appendToBody: true,
className: 'custom-tooltip',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
},
formatter: function (params) {
var relVal = '';
for (var i = 0, l = params.length; i < l; i++) {
if (!params[i].seriesName.includes('series')) relVal += params[i].marker + params[i].seriesName + " " + params[i].value + '<br/>'
}
return relVal
}
},
series: [
// 折线图1
{
name: seriesName[0],
type: "line",
symbolSize: 5,
symbol: "circle",
itemStyle: {
color: "#00F6FF",
},
data: seriesData1
},
// 圆形柱状图
{
name: seriesName[1],
data: seriesData,
type: 'bar',
barWidth: 20,
// 柱形颜色渐变
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#0E60B2'
},
{
offset: 1,
color: '#1FAEDE'
}
],
global: false
},
itemStyle: {
normal: {
barBorderRadius: 10,
label: {
show: false,
position: 'top',
textStyle: {
color: '#FFFFFF',
fontSize: 12
},
formatter: function (params) {
return params.value
}
}
}
}
},
{
color: '#17E1FF',
type: 'pictorialBar',
symbol: 'circle',
symbolSize: ['20', '10'],
symbolPosition: 'end',
symbolOffset: [0, 0],
data: seriesData,
z: 3,
}, {
color: '#1E80E4',
type: 'pictorialBar',
symbol: 'circle',
symbolSize: ['20', '10'],
symbolPosition: 'start', // 图形边缘与柱子结束的地方内切。
symbolOffset: [0, 0], // 椭圆水平偏移,垂直偏移. 因为不一定正好盖住柱形,所以可能要移动一点点
data: seriesData, // 数据要跟主体柱形一致
z: 3, // 数值越大,层级越高,可以盖住下面的图形
},
// 折线图2
{
name: seriesName[2],
type: "line",
symbolSize: 5,
yAxisIndex: 1,
symbol: "circle",
itemStyle: {
color: "#EC9C45",
},
data: seriesData2
},
]
};
},
渐变柱状图
示意图：
配置：
const echartDom = document.getElementById("dataQuality")
const myChart = echarts.init(echartDom)
let option = {
grid: {
left: "0%",
top: "0%",
right: "2%",
bottom: "0%",
containLabel: true,
},
xAxis: {
type: "value",
show: true,
position: "bottom",
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "#64718a",
},
},
axisLabel: {
color: "#C0E7FF",
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#3a4761"
}
},
},
yAxis: [
{
type: "category",
axisTick: {
show: false,
alignWithLabel: false,
length: 5,
},
splitLine: {
//网格线
show: false,
},
axisLabel: {
color: "#C0E7FF",
},
inverse: "false",
axisLine: {
show: true,
lineStyle: {
color: "#64718a",
},
},
data: ["一致性", "调整性", "波动性", "及时性"],
},
],
series: [
{
name: "",
type: "bar",
itemStyle: {
normal: {
barBorderRadius: 30,
// color: new echarts.graphic.LinearGradient(
// 0, 0, 0, 1, [{
// offset: 0,
// color: "rgba(0, 219, 150, 0.33)",
// },
// {
// offset: 0.95,
// color: "rgba(0, 219, 150, 1)",
// },
// {
// offset: 1,
// color: "#fff",
// }
// ]
// ),
color: {
colorStops: [
{
offset: 0,
color: "rgba(0, 219, 150, 0.33)",
},
{
offset: 0.95,
color: "rgba(0, 219, 150, 1)",
},
{
offset: 1,
color: "#fff",//最后尖尖的白色
}
]
}
},
barBorderRadius: 70,
borderWidth: 0,
borderColor: "#333",
},
barGap: "0%",
barCategoryGap: "50%",
data: [55, 64, 32, 62],
},
],
};
option && myChart.setOption(option)
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
myChart.resize();
});
类似电池的柱状图进度条
示意图：
配置：
// 敏感数据分布（驻）和数据访问量统计公用
initCommon(idName, xData, yData, maxY) {
const echartDom = document.getElementById(idName)
const myChart = echarts.init(echartDom)
let option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
formatter: function (item) {
return (
item[0].axisValueLabel +
"<br />" +
item[0].seriesName +
": " +
item[0].data
);
},
},
grid: {
top: 30,
right: 0,
left: 30,
bottom: 20,
},
xAxis: [
{
data: xData,
axisLine: {
lineStyle: {
color: "#687c99",
},
},
axisTick: {
show: false,
},
axisLabel: {
color: "#C0E7FF",
fontSize: 12,
interval: 0,
},
}
],
yAxis: [
{
name: "数量",
nameTextStyle: {
color: "#C0E7FF"
},
max: maxY,
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#182450"
}
},
axisLabel: {
textStyle: {
color: "#C0E7FF",
},
},
},
],
series: [
{
name: "",
type: "bar",
barWidth: 25,
itemStyle: {
color: "rgba(16, 32, 68,0.6)",
borderWidth: 0,
borderColor: "#10bffc",
padding: 0,
},
label: {
show: false,
},
z: 10,
data: new Array(yData.length).fill(maxY),
},
{
name: "数量",
type: "pictorialBar",
symbol: "rect",
itemStyle: {
color: "rgba(0, 133, 247, 1)",
},
symbolRepeat: true,
symbolSize: [19, 4],
symbolMargin: 2,
symbolPosition: "start",
z: 20,
data: yData,
label: {
normal: {
show: true,
position: "top",
distance: '15',
verticalAlign: "top",
color: "rgba(192, 231, 255, 1)"
},
},
}
],
}
option && myChart.setOption(option)
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
myChart.resize();
});
},
渐变折线图
效果图：
配置：
const echartDom = document.getElementById("projectOperation")
const myChart = echarts.init(echartDom)
let color = ["#0090FF", "#36CE9E", "#FFC005", "#FF515A", "#8B5CFF", "#00CA69"];
let echartData = [
{
name: "23-06",
value2: 43,
},
{
name: "23-07",
value2: 20,
},
{
name: "23-08",
value2: 60,
},
{
name: "23-09",
value2: 40,
},
{
name: "23-10",
value2: 17,
},
{
name: "23-11",
value2: 72,
},
{
name: "23-12",
value2: 45,
}
];
let xAxisData = echartData.map((v) => v.name);
let yAxisData2 = echartData.map((v) => v.value2);
const hexToRgba = (hex, opacity) => {
let rgbaColor = "";
let reg = /^#[\da-f]{6}$/i;
if (reg.test(hex)) {
rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
"0x" + hex.slice(3, 5)
)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
}
return rgbaColor;
};
let option = {
color: color,
tooltip: { trigger: "axis" },
grid: {
top: 30,
left: '7%',
bottom: 20
},
xAxis: [
{
type: "category",
boundaryGap: false,
axisLabel: {
formatter: "{value}",
textStyle: {
color: "rgba(192, 231, 255, 1)",
},
},
splitLine: {
show: false,
},
axisLine: {
lineStyle: {
color: "#34405a",
},
},
data: xAxisData,
axisTick: {
show: false,
},
},
],
yAxis: [
{
type: "value",
name: "访问量(万次)",
max: 80,
min: 0,
splitNumber: 5,
nameTextStyle: {
color: "#C0E7FF",
show: true,
fontSize: '12',
align: 'left'
},
axisLabel: {
textStyle: {
color: "rgba(192, 231, 255, 1)",
},
},
splitLine: {
lineStyle: {
type: "dashed",
color: "#3a4761",
},
},
axisLine: {
lineStyle: {
color: "#34405a",
},
},
axisTick: {
show: false,
},
},
],
series: [
{
name: "",
type: "line",
smooth: true,
// showSymbol: false,
symbolSize: 8,
zlevel: 3,
lineStyle: {
normal: {
color: color[1],
// shadowBlur: 3,
// shadowColor: hexToRgba(color[1], 0.5),
// shadowOffsetY: 8,
},
},
itemStyle: {
color: "rgba(0, 219, 150, 1)",
borderColor: "rgba(192, 231, 255, 1)",
borderWidth: 0,
// shadowColor: "rgba(0, 0, 0, .3)",
// shadowBlur: 0,
// shadowOffsetY: 0,
// shadowOffsetX: 0,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: hexToRgba(color[1], 0.3),
},
{
offset: 1,
color: hexToRgba(color[1], 0.1),
},
],
false
),
shadowColor: hexToRgba(color[1], 0.1),
shadowBlur: 0,
},
},
data: yAxisData2,
},
],
};
option && myChart.setOption(option)
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
myChart.resize();
});
似三角锥（三角形）图形
效果图：
配置：
initDataEcharyts() {
const echartDom = document.getElementById("dataEcharts")
const myChart = echarts.init(echartDom)
let option = {
grid: {
top: 30,
bottom: 20
},
xAxis: [
{
data: [
"21-09",
"21-10",
"21-11",
"21-12",
"22-01",
"22-01",
"22-03"
],
axisLabel: {
color: "#C0E7FF",
fontSize: 10
},
axisTick: {
show: false
},
axisLine: {
show: false
}
}
],
yAxis: [
{
name: "数量",
nameTextStyle: {
color: "#C0E7FF"
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#182450"
}
},
axisLabel: {
color: "#C0E7FF"
}
}
],
// 使用内部缩放（滚轮缩放、鼠标拖着左右滑动）
dataZoom: [
{
type: "inside",
minValueSpan: 6, // 最小展示数
start: 0, // 开始展示位置（默认）
end: 5 // 结束展示位置 （默认）
}
],
series: [
{
name: "hill",
// 象柱形图
type: "pictorialBar",
// 同一系列的柱间距离
barCategoryGap: "20%",
// 自定义svg 图标 (三角锥形的关键)
// symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,2 C4.5,5 4.5,10 0,10 z",
label: {
normal: {
show: true,
position: "top",
formatter: "{c}",
textStyle: {
color: "#C0E7FF", //color of value
},
},
},
// 默认样式
itemStyle: {
label: {
show: false
},
borderColor: "#206fde",
borderWidth: 0,
color: {
colorStops: [
{
offset: 0,
color: "rgba(0, 133, 247, 1)"
},
{
offset: 1,
color: "rgba(0, 133, 247, 0.14)"
}
]
}
},
// 鼠标滑过样式
emphasis: {
label: {
show: true,
position: "top",
color: "#12DCFF"
},
itemStyle: {
borderColor: "#17cdfa",
borderWidth: 2,
color: {
colorStops: [
{
offset: 0,
color: "rgba(0, 133, 247, 1)"
},
{
offset: 1,
color: "rgba(0, 133, 247, 1)"
}
]
}
}
},
data: [80, 80, 60, 70, 80, 80, 60],
z: 10
}
]
}
option && myChart.setOption(option)
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
myChart.resize();
});
},
带动画的饼图
外面的环会旋转。
示意图：
配置：
initCompleteStatistics() {
const echartDom = document.getElementById("completeStatistics")
const myChart = echarts.init(echartDom)
let colorList = ["#00DB96", "#E59734", "#E59734"]
let angle = 0;
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
function getCirlPoint(x0, y0, r, angle) {
let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
return {
x: x1,
y: y1,
};
}
let option = {
tooltip: {
trigger: 'item'
},
series: [
{
name: '',
type: 'pie',
label: {
position: "outside",
normal: {
distance: '30',
formatter: (a) => {
const { value, name, percent } = a
return `${name} \n \n${value} ${percent}%`
},
backgroundColor: "rgba(255, 147, 38, 0)",
borderColor: "transparent",
borderRadius: 4,
textStyle: {
color: "#C0E7FF",
fontSize: 12,
},
},
},
labelLine: {
normal: {
length: 40,
length2: 60,
show: true,
color: "#4e5b75",
}
},
radius: ['70%', '40%'],
axisLabel: {
color: "#C0E7FF",
},
itemStyle: {
color: (params) => {
return colorList[params.dataIndex % colorList.length];
},
},
data: [
{ value: 218, name: '未备注' },
{ value: 4375, name: '已备注' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
// 外面转圈的环
{
name: "ring5",
type: "custom",
coordinateSystem: "none",
renderItem: function (params, api) {
return {
type: "arc",
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.9,
startAngle: ((0 + angle) * Math.PI) / 180,
endAngle: ((90 + angle) * Math.PI) / 180,
},
style: {
stroke: "#e59734",
fill: "transparent",
lineWidth: 1.5,
},
silent: true,
};
},
data: [0],
},
{
name: "ring5",
type: "custom",
coordinateSystem: "none",
renderItem: function (params, api) {
return {
type: "arc",
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.9,
startAngle: ((180 + angle) * Math.PI) / 180,
endAngle: ((270 + angle) * Math.PI) / 180,
},
style: {
stroke: "#e59734",
fill: "transparent",
lineWidth: 1.5,
},
silent: true,
};
},
data: [0],
},
{
name: "ring5",
type: "custom",
coordinateSystem: "none",
renderItem: function (params, api) {
return {
type: "arc",
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.79,
startAngle: ((270 + -angle) * Math.PI) / 180,
endAngle: ((40 + -angle) * Math.PI) / 180,
},
style: {
stroke: "#00db96",
fill: "transparent",
lineWidth: 1.5,
},
silent: true,
};
},
data: [0],
},
{
name: "ring5",
type: "custom",
coordinateSystem: "none",
renderItem: function (params, api) {
return {
type: "arc",
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.79,
startAngle: ((90 + -angle) * Math.PI) / 180,
endAngle: ((220 + -angle) * Math.PI) / 180,
},
style: {
stroke: "#00db96",
fill: "transparent",
lineWidth: 1.5,
},
silent: true,
};
},
data: [0],
},
{
name: "ring5",
type: "custom",
coordinateSystem: "none",
renderItem: function (params, api) {
let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2;
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.79;
let point = getCirlPoint(x0, y0, r, 90 + -angle);
return {
type: "circle",
shape: {
cx: point.x,
cy: point.y,
r: 4,
},
style: {
stroke: "#00db96", //粉
fill: "#00db96",
},
silent: true,
};
},
data: [0],
},
{
name: "ring5", //绿点
type: "custom",
coordinateSystem: "none",
renderItem: function (params, api) {
let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2;
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.79;
let point = getCirlPoint(x0, y0, r, 270 + -angle);
return {
type: "circle",
shape: {
cx: point.x,
cy: point.y,
r: 4,
},
style: {
stroke: "#00db96", //绿
fill: "#00db96",
},
silent: true,
};
},
data: [0],
},
]
};
option && myChart.setOption(option)
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
myChart.resize();
});
let that = this
function draw() {
let now = new Date().getTime()
if (now - that.lastTime > 40) {
angle = angle + 3;
that.lastTime = now
}
myChart.setOption(option, true);
// window.requestAnimationFrame(draw);
that.annimationId = requestAnimationFrame(draw)
}
setTimeout(() => {
draw()
}, 1000);
},
渐变仪表盘
刻度和优、良、差文字都是使用的背景图，不会更改就直接使用的图片，
实际绘制效果
initChart() {
const echartDom = document.getElementById("charts")
const myChart = this.$echarts.init(echartDom)
var demoData = {
name: "城镇化率",
value: 72,
};
let option ={
title: {
text: "{num|" + demoData.value + "}",
subtext: '分',
x: "49%",
y: "38%",
textAlign: "center",
textStyle: {
rich: {
num: {
fontWeight: "600",
color: "#F8F8FA",
fontFamily: "微软雅黑",
fontSize: this.convertPx(40),
},
},
},
subtextStyle: {
fontWeight: "500",
color: "rgba(255,244,255,0.4)",
fontFamily: "微软雅黑",
fontSize: this.convertPx(16),
}
},
series: [
{
type: "gauge",
radius: "86%",
center: ["50%", "50%"],
// splitNumber: 10,
// min: 0,
max: 100,
startAngle: 245,
endAngle: -62,
z: 99,
// 线
axisLine: {
lineStyle: {
width: 1,
color: [[1, "rgba(255,255,255,0)"]],
},
detail: {
formatter: "{value}",
},
data: [
{
value: 50,
name: "SCORE",
},
],
},
//刻度标签。
axisTick: {
show: false,
splitNumber: 6, //刻度的段落数
lineStyle: {
color: "#02C2A2",
width: 2, //刻度的宽度
shadowColor: "#67FFFC",
shadowBlur: 2,
},
length: 2, //刻度的长度
},
splitLine: {
//文字和刻度的偏移量
show: false,
length: -10, //长度
lineStyle: {
color: "#02C2A2",
width: 4,
},
},
// //刻度线文字
axisLabel: {
show: false,
color: "#02C2A2",
fontSize: 16,
distance: -30,
},
data: [
{
value: demoData.value,
name: "SCORE",
itemStyle: {
color: "#02C3A2",
},
},
],
pointer: {
show: true,
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAABOCAYAAACE9o5PAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAPeSURBVHic7ZhNbxtVFIbfc2c8jh1/KG1MIEJgQkqQK5UFWSDUBV2xCYJVfwBbfkCXzK9gwU9od10hNmFRVSzSBaoCKrUig1AgQXVij+3xfN3DorEyDq5rTzz2THSf3Zz5uPfVOXPvuS9whdh8ztnaPhuDa1rkZGbJ1iMuIo8iAHgS3YNtal0JcbV9NgIHq+HYWy0ci0VNaJa4L1AeunYR/HSHfH1RE5oVmz9zSTOQCcc8iTYApDpzm885qxkohGOeRPevT8kGUi2OiY+Hy9G34R9sv8waAKS2LDf2UNLF8PzpDbQA4sF1KjP39mPOZQSWw7HARad+g5xwLH3iTBYZgVI4FABe/RNqX3w0dWVZ/RIlg6GFY0YWrVHPpipz63uczzLyQ8EerF9vkjvq+fSIu8+aIYfLkSXcZ7fJetUrqRH3zocoZfXh+RYxuhwHpELc2i+8nPORC8e0FtpPtskb95427mYS+GyXdanjGtP5CYY8OL/dprFZA1KQuX/yKEtxLkxI8Ju98eU4INFHntouF4Ly8CJyqqF19BF1J3k/sfvcx3uc6VzYrG0d9tGtyYQBCRZnAeVwWTk+5J91/K8LGUcixW094iIEjHDMFWjjLgXTfCdxC0ptn42BFzLAIfQOt6k37bcSlznXQTm8P7kugsYP05XjgEStlmeWwdDJ2llBs/Ee9aN8LzFl+SrLIKowICni+PWWQRQSIW7jCUp6brxlEIWFi5vUMojCYsWNsgw6oy2DKCxU3MYOitLtCfTOtzDj+mRN8SQsTFx1l5f49HiJgi73JVhI8DjLIAqLEccs3M7fBdFmpjYzWV22XDjjLIMoLETc1sNny7AskG+xCCzWdCk3ncst+6OY+0m8au4u9X2ZI92AR4ABgi0y3aefly69Ol5kvpkzWcisntNETpInmTzJcOEcfrE+dVM8CXNtnNeWf8wJ3WA4L14O7Za5vvp04sPntMytLGvmfaPtZYwcnYKCLAAgg6bd/PqrsQ7WZZiPONMUQGWJegSbbPT9LMhxvD/u7URuiidhLv9ctfGuITp9po7Douewho48/HbHjnvc+MWZpu6vnJDWtlnk+0ydPv+LSh90uaZ4EuIVZ5qi2oCun6ywWO6y1ra5rAUezDt+rOOeEe8/Z32gr8Il0S0A2im0oMMH39+bWXv1OuLLnGkKAKgXrnO90GT96Bo3qnABxF6OA+LKHKFSEfDfB44OgRMLzbVbAb77RsY03kjiy9yDm4zKPqP4O6O4znhwdyrPMekQYIqz8kyUyzYrCFdUmEKhUCgUCoVCoVAoFAqFQqFQKBQKhUIRgf8AnDJvH4qxS04AAAAASUVORK5CYII=",
length: "100%",
radius: "10%",
width: 10, //指针粗细
itemStyle: {
color: {
type: "linear",
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 1,
color: "#24caff", // 0% 处的颜色
},
{
offset: 0.8,
color: "#24caff", // 0% 处的颜色
},
{
offset: 0.46,
color: "rgba(36, 202, 255, 0)", // 100% 处的颜色
},
{
offset: 0,
color: "rgba(36, 202, 255, 0)", // 100% 处的颜色
},
],
},
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 8,
shadowOffsetX: 2,
shadowOffsetY: 4
},
offsetCenter: [0, '0'],
},
detail: {
show: false,
},
title: {
// 仪表盘标题。
show: false,
},
},
{
name: demoData.name,
type: "pie",
radius: ["64%", "86%"],
center: ["50%", "50%"],
startAngle: 245,
endAngle: -62,
color: [
{
type: "linear",
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#35d2eb", // 0% 处的颜色
},
{
offset: 0.5,
color: "#35d2eb", // 0% 处的颜色
},
{
offset: 1,
color: "#0f97fb", // 100% 处的颜色
},
],
},
"transparent",
],
hoverAnimation: true,
legendHoverLink: false,
z: 10,
labelLine: {
normal: {
show: false,
},
},
data: [
{
value: (85.27 * (demoData.value)) / 100,
},
{
value: 100 - (85.27 * (demoData.value)) / 100,
},
],
},
],
}
option && myChart.setOption(option)
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
myChart.resize();
});
},
双y轴
init() {
let dom = this.$refs.chart;
let myChart = echarts.init(dom);
// const { color, xData, yData1, yData2 } = {
// color: ['#3BB6F9', '#FD8D1B'],
// xData: [],
// yData1: [40, 52, 25, 70, 19, 29, 39, 52, 45, 47, 51, 22, 48, 34, 78, 22, 45,],
// yData2: [55, 45, 48, 62, 53, 42, 46, 70, 53, 43, 36, 70, 55, 35, 53, 82, 34,]
// };
var option = {
legend: {
x: 'center',
y: 'bottom',
itemWidth: 15,
itemHeight: 12,
bottom: 0,
textStyle: {
color: "#999999",
},
},
grid: {
borderWidth: 0,
top: 40,
bottom: '11%',
right: '0',
left: 10,
containLabel: true,
},
calculable: true,
xAxis: [
{
type: "category",
axisLine: {
show: true,
lineStyle: {
type: "solid",
color: "rgba(0, 0, 0, 0.15)",
width: 1,
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
splitArea: {
show: false,
},
axisLabel: {
interval: 0,
color: "rgba(102, 102, 102, 1)",
fontSize: 12,
},
data: this.xData,
},
],
yAxis: [
{
type: "value",
name: this.yData[0].unit,
splitNumber: 4,
nameLocation: 'end',
position: "left",
nameTextStyle: {
color: '#999999',
fontSize: 14,
},
splitLine: {
show: true,
lineStyle: {
type: "solid",
color: "rgba(235, 235, 235,1)",
width: 1,
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#666666",
fontSize: 12,
},
splitArea: {
show: false,
},
},
{
type: "value",
position: "right",
splitNumber: 4,
name: this.yData[1].unit,
nameLocation: 'end',
nameTextStyle: {
show: true,
color: '#999999',
fontSize: 14,
},
splitLine: {
show: false,
lineStyle: {
type: "solid",
color: "rgba(235, 235, 235,1)",
width: 1,
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#666666",
fontSize: 12,
},
splitArea: {
show: false,
},
},
],
series: [
{
name: this.yData[0].name,
type: "bar",
barWidth: 15,
yAxisIndex: 0,
itemStyle: {
color: this.color[0],
},
data: this.yData[0].data,
},
{
name: this.yData[1].name,
type: "line",
symbolSize: 7,
symbol: "circle",
yAxisIndex: 1,
itemStyle: {
normal: {
color: this.color[1],
barBorderRadius: 1,
borderColor: "#fff",
},
},
lineStyle: {
normal: {
width: 2,
color: this.color[1],
},
},
data: this.yData[1].data,
},
],
};
myChart.setOption(option, true);
window.addEventListener("resize", () => {
myChart.resize();
});
}
饼图
initChart() {
const echartDom = this.$refs.echarts
const myChart = this.$echarts.init(echartDom)
let option = {
animation: true,
title: {
text: '金融',
subtext: "同行业",
x: "center",
y: "42%",
textStyle: {
color: "rgba(47, 48, 51, 1)",
fontSize: 24,
fontWeight: "600",
align: "center",
},
subtextStyle: {
color: "rgba(47, 48, 51, 1)",
fontSize: 16,
fontWeight: "normal",
align: "center",
},
},
legend: {
width: "100%",
left: "center",
itemWidth: 10,
itemHeight: 10,
textStyle: {
color: "#666666",
fontSize: 14,
},
icon: "circle",
right: "0",
bottom: "10",
itemGap: 15,
},
series: [
{
type: "pie",
center: ["50%", "50%"],
radius: ["34%", "45%"],
color: [
"#7282ff",
"#5084ff",
"#67b3ff",
"#79caeb",
"#6ecc9e",
],
startAngle: 90,
labelLine: {
normal: {
length: 25,
},
},
label: {
normal: {
formatter: "{b|{b}:} \n {per|{d}%} {value|{value}%}",
formatter: (val) => {
return `{b|${val.name}} \n {per|${val.percent}%} {value|(${val.value})}`
},
backgroundColor: "rgba(255, 147, 38, 0)",
borderColor: "transparent",
borderRadius: 4,
rich: {
b: {
color: "#606266",
fontSize: 14,
lineHeight: 33,
},
per: {
color: "#2F3033",
fontSize: 16,
borderRadius: 2,
fontWeight: "500",
},
value: {
color: "#2F3033",
fontSize: 16,
borderRadius: 2,
fontWeight: "500",
},
},
textStyle: {
color: "#fff",
fontSize: 16,
},
},
},
data: [
{
name: "XXXXXXXXX",
value: 524,
},
{
name: "XXXXXXXX",
value: 5590,
},
{
name: "XXXXXXX",
value: 1557,
},
{
name: "XXXXXX",
value: 1557,
},
{
name: "XXXXXxXXXX",
value: 1557,
},
],
},
],
};
option && myChart.setOption(option)
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
myChart.resize();
});
}
多折线图
<template>
<div ref="lineRef" id="lineChart" style="width: 100%;height: 100%;">
</div>
</template>
<script>
export default {
name: 'WebLineChart',
data() {
return {
};
},
mounted() {
let xData = ['1月', '2月', '3月', '4月', '5月', '6月']
let yData = [12, 15, 16, 18, 18]
this.initCommon('lineChart', xData, yData)
},
methods: {
initCommon(idName, xData, yData, maxY) {
const echartDom = document.getElementById(idName)
const myChart = this.$echarts.init(echartDom)
let option = {
grid: {
top: 30,
right: 0,
left: 0,
bottom: 0,
containLabel: true,
},
legend: {
position: "top",
show: true,
align: "left",
icon: "circle",
itemWidth: 8,
itemHeight: 8,
textStyle: {
color: 'rgba(255, 255, 255, 1)',
fontSize: 8
},
},
xAxis: [
{
data: xData,
axisLine: {
lineStyle: {
color: "#48687f",
},
},
axisTick: {
show: false,
},
axisLabel: {
color: "rgba(230, 247, 255, 1)",
fontSize: 10,
interval: 0,
},
}
],
yAxis: [
{
name: "",
nameTextStyle: {
color: "#C0E7FF"
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: "#48687d"
}
},
axisLabel: {
textStyle: {
color: "rgba(230, 247, 255, 1)",
fontSize: 10
},
},
},
],
series: [
// 折线图1
{
name: '总数',
type: "line",
smooth: true,
symbolSize: 6,
symbol: "circle",
lineStyle: {
color: 'rgba(56, 108, 176, 1)',
},
itemStyle: {
color: "rgba(56, 108, 176, 1)",
borderColor: "#ffffff",
borderType: "solid",
},
data: [28, 13, 26, 11, 16, 20]
},
{
name: '新业务类',
type: "line",
smooth: true,
symbol: "none",
itemStyle: {
color: "rgba(120, 223, 227, 1)",
},
data: [2, 1, 1, 3, 1, 3]
},
{
name: '个人类',
type: "line",
smooth: true,
symbol: "none",
itemStyle: {
color: "rgba(52, 117, 235, 1)",
},
data: [13, 8, 12, 1, 5, 6]
},
{
name: '家庭类',
type: "line",
smooth: true,
symbol: "none",
itemStyle: {
color: "rgba(235, 161, 49, 1)",
},
data: [5, 2, 6, 2, 3, 1]
},
{
name: '政企类',
type: "line",
smooth: true,
symbol: "none",
itemStyle: {
color: "rgba(250, 113, 15, 1)",
},
data: [8, 2, 6, 2, 3, 2]
},
],
}
option && myChart.setOption(option)
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
myChart.resize();
});
},
},
};
</script>
带类似滚动条的柱状图
const echartDom = this.$refs.echarts
const myChart = this.$echarts.init(echartDom)
let option = {
backgroundColor: "#fff",
grid: {
top: "15%",
right: "0%",
left: "0%",
bottom: "12%",
containLabel: true
},
xAxis: [
{
type: "category",
color: "#59588D",
data: this.xData,
axisLabel: {
color: "#333333",
textStyle: {
fontSize: 16
},
},
axisLine: {
lineStyle: {
color: "rgba(237, 238, 240,0.8)",
},
},
axisTick: {
show: false,
},
},
],
dataZoom: [
{
type: "slider",
show: true,
zoomLock: true,
filterMode: "none",
right: "2%",
start: 0,
bottom: 10,
end: 40,
showDetail: false,
zoomOnMouseWheel: true,
height: 16,
textStyle: {
show: false,
color: "#FFF",
fontSize: 9,
},
fillerColor: "#9abbff",
brushSelect: false,
handleIcon: "path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z",
handleSize: "100%",
handleStyle: {
color: "#9abbff",
borderWidth: 0,
borderRadius: 10
},
backgroundColor: "#f1f5ff", //两边未选中的滑动条区域的颜色
borderColor: "transparent",
filterMode: "empty",
borderRadius: 100,
dataBackground: {
borderRadius: '20',
lineStyle: {
opacity: 0
},
areaStyle: {
opacity: 0
}
},
},
{
type: "inside",
// 滚轮是否触发缩放
zoomOnMouseWheel: false,
// 鼠标滚轮触发滚动
moveOnMouseMove: true,
moveOnMouseWheel: true,
handleStyle: {
borderRadius: 10
}
},
],
yAxis: [
{
name: '单位：(台)',
max: 100,
// splitNumber: 3,
internal: 25,
nameTextStyle: {
color: 'rgba(153, 153, 153, 1)',
fontSize: 12,
},
axisLabel: {
formatter: "{value}%",
color: "#939599",
textStyle: {
fontSize: 14,
},
},
axisLine: {
lineStyle: {
color: "rgba(107,107,107,0.37)",
},
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
color: "rgba(224, 225, 229, 0.7)",
type: "dashed",
},
},
},
],
series: [
{
type: "bar",
name: "数量",
data: this.yData[0].data,
barWidth: 15,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 1,
color: 'rgba(255, 255, 255, 0.6)'
},
{
offset: 0.6,
color: this.color
},
{
offset: 0,
color: this.color,
},
],
false
),
borderRadius: [4, 4, 0, 0],
},
},
label: {
normal: {
formatter: ({ value }) => {
return value + '%'
},
show: true,
fontSize: 14,
color: "#333",
position: "top",
},
},
},
],
};
option && myChart.setOption(option)
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
myChart.resize();
});
}
仪表盘
const pointData = this.pieData
const o = [
// 彩色刻度线
{
width: 10,
tickLength: 60,
distance: -50,
tickWidth: 1.5
},
];
let option = {
backgroundColor: '#fff',
grid: {
left: 0,
top: 0,
bottom: 0, right: 0
},
title: {
text: "{num|" + pointData + '%' + "}",
subtext: '总健康度',
x: "49%",
y: "35%",
textAlign: "center",
itemGap: 5,
textStyle: {
rich: {
num: {
fontWeight: "500",
color: "#1479EA",
fontFamily: "微软雅黑",
fontSize: 26,
lineHeight: 26,
},
},
},
subtextStyle: {
fontWeight: "500",
color: "#666666",
fontFamily: "微软雅黑",
fontSize: 14,
}
},
series: [
// 彩色刻度线
{
type: 'gauge',
radius: '75%',
z: 1,
startAngle: 225,
endAngle: -45,
splitNumber: 4,
splitLine: {
show: false
},
// 仪表盘的线，颜色值为一个数组
axisLine: {
show: true,
lineStyle: {
width: o[0].width,
opacity: 1,
color: [
[
pointData / 100,
{
x: 0,
y: 1,
x1: 0,
y1: 0,
colorStops: [
{
offset: 0,
color: 'rgba(20, 121, 234, 0)'
},
{
offset: 1,
color: 'rgba(20, 121, 234, 1)'
}
]
}
],
[1, '#F1F1F1']
]
}
},
// 仪表盘刻度标签
axisLabel: {
show: false
},
axisTick: {
show: true,
distance: -50,
lineStyle: {
color: '#fff',
width: o[0].tickWidth
},
length: o[0].tickLength
} //刻度样式
},
// 辅助线
{
type: 'gauge',
name: '外层辅助',
radius: '82%',
startAngle: '225',
endAngle: '-45',
splitNumber: '17',
pointer: {
show: false
},
detail: {
show: false
},
data: [
{
value: 1
}
],
title: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: [[1, '#F1F1F1']],
width: 2,
opacity: 1
}
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
}
},
{
type: 'gauge',
name: '外层辅3助',
z: 5,
radius: '97%',
startAngle: 225,
endAngle: -45,
splitNumber: 4,
axisTick: {
show: true,
lineStyle: {
width: 2,
shadowBlur: 0,
color: '#F1F1F1'
},
length: 5,
splitNumber: 3
},
data: [
{
value: pointData
}
],
title: {
show: false
},
detail: {
show: false,
offsetCenter: [0, '50%'],
},
axisLine: {
show: false,
lineStyle: {
color: [[1, '#1479EA']],
width: 1,
opacity: 1
}
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
pointer: {
show: false
}
},
{
type: 'gauge',
name: '外层辅3助',
z: 5,
radius: '97%',
startAngle: 225,
endAngle: -45,
splitNumber: 4,
pointer: {
icon: "circle",
width: 3,
length: '115%',
offsetCenter: ['0%', '0%'],
itemStyle: {
color: "#116fd6",
borderColor: "#3d92ed",
borderWidth: 0,
},
},
axisTick: {
show: false,
},
data: [
{
value: pointData
}
],
title: {
show: false
},
detail: {
show: false,
offsetCenter: [0, '50%'],
},
axisLine: {
show: false,
lineStyle: {
color: [[1, '#1479EA']],
width: 1,
opacity: 1
}
},
splitLine: {
show: false
},
axisLabel: {
show: false
}
}
]
};
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
this.chart.resize();
});
多重柱状图
let colotArr = ['#1890FF', '#FFA459', '#A66BFF', '#4EE3D5', '#DB611A']
let series = []
this.chartData.yData.forEach(item => {
series.push({
name: item.name,
type: 'bar',
stack: '总量',
barWidth: '18px',
data: item.data
})
});
let option = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
color: colotArr,
legend: {
icon: 'circle',
itemGap: 22,
itemWidth: 5, // 设置宽度
itemHeight: 5,
left: 0,
top: '0',
right: '30',
textStyle: {
color: '#999999',
fontSize: 12
},
},
grid: {
left: '0%',
right: '0%',
bottom: '0%',
top: '16%',
containLabel: true
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#273860'
}
},
axisTick: {
show: false
},
axisLabel: {
color: "#909199",
textStyle: {
fontSize: 12
},
},
axisLine: {
show: false
},
data: this.chartData.xData
},
yAxis: {
type: 'value',
axisLabel: { //坐标轴刻度标签的相关设置。
interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
textStyle: {
color: "#909199",
fontFamily: '微软雅黑',
fontSize: 12,
}
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: "rgba(192, 196, 204, 0.2196)",
},
},
splitLine: {
lineStyle: {
color: "rgba(192, 196, 204, 0.2196)",
type: "dashed",
},
},
},
series: series
};
自定义tooltip样式
let barOptions= {
color: ['#79C471', '#1484FA'],
grid: {
left: '0%',
right: '0%',
top: '6%',
bottom: '13%',
containLabel: true
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255, 255, 255, 0.8)',
borderColor: 'rgba(235, 240, 250, 1)',
borderWidth: 1,
extraCssText: 'box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);line-height:18px;padding:9px 16px 15px',
axisPointer: {
lineStyle: {
color: 'rgba(255,255,255,0)'
}
},
textStyle: {
color: '#666666',
fontSize: 12
},
formatter: (params) => {
return `
<div style="margin-bottom:5px">${params[0].name}</div>
<div>BC市场总空间：<span >${params[0].data + params[1].data}</span> </div>
<div>${params[0].seriesName}：<span >${params[0].data}</span> </div>
<div>${params[1].seriesName}：<span >${params[1].data}</span> </div>
`
},
},
xAxis: {
name: '',
type: 'category',
data: ['B收入', 'C收入', 'BC总收入'],
axisTick: {
show: false,
},
axisLabel: {
color: '#999999',
fontSize: 12
},
// 轴
axisLine: {
show: true,
lineStyle: {
color: '#E3E3E3'
}
},
// 轴的纵向分割线
splitLine: {
show: false,
},
splitArea: {
show: false
}
},
yAxis: {
type: 'value',
axisTick: {
show: false,
},
axisLabel: {
color: '#999999',
fontSize: 12
},
axisLine: {
show: true,
lineStyle: {
color: '#E3E3E3'
}
},
splitLine: {
show: false,
},
},
legend: {
bottom: '0%',
itemGap: 20,
itemWidth: 11,
itemHeight: 11,
textStyle: {
fontSize: 12,
color: '#666666'
}
},
series: [
{
name: 'XXX',
data: [25, 35, 25],
type: 'bar',
barWidth: 24,
stack: "income",
itemStyle: {
borderRadius: 4
}
},
{
name: 'XXXX',
data: [30, 40, 30],
stack: "income",
type: 'bar',
barWidth: 24,
itemStyle: {
borderRadius: 4
}
}
]
},
涟漪动画配置项
{
type:"effectScatter", //特效散点图
zlevel:0, //柱状图所有图形的 zlevel 值。
z:2, //柱状图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
silent:false, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
name:"数据名称", //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
legendHoverLink:true, //是否启用图例 hover 时的联动高亮。
hoverAnimation:true, //是否开启鼠标 hover 的提示动画效果。
effectType:"ripple", //特效类型，目前只支持涟漪特效'ripple'。
showEffectOn:"render", //配置何时显示特效。可选：'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。
rippleEffect:{ //涟漪特效相关配置。
period:4, //动画的时间。
scale:2.5, //动画中波纹的最大缩放比例。
brushType:'fill', //波纹的绘制方式，可选 'stroke' 和 'fill'。
},
coordinateSystem:"geo", //'cartesian2d'使用二维的直角坐标系。'geo'使用地理坐标系
xAxisIndex:0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
yAxisIndex:0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
polarIndex:0, //使用的极坐标系的 index，在单个图表实例中存在多个极坐标系的时候有用。
geoIndex:0, //使用的地理坐标系的 index，在单个图表实例中存在多个地理坐标系的时候有用。
calendarIndex:0, //使用的日历坐标系的 index，在单个图表实例中存在多个日历坐标系的时候有用。
symbol:"pin", //图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize:50, //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
symbolRotate:0, //标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。
symbolOffset:[0,0], //标记相对于原本位置的偏移。默认情况下，标记会居中置放在数据对应的位置
large:false, //是否开启大规模散点图的优化，在数据图形特别多的时候（>=5k）可以开启。开启后配合 largeThreshold 在数据量大于指定阈值的时候对绘制进行优化。缺点：优化后不能自定义设置单个数据项的样式。
largeThreshold:2000, //开启绘制优化的阈值。
cursor:"pointer", //鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。
label:{ //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，
normal:mylabel,
emphasis:mylabel
},
itemStyle:{ //图形样式，normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
normal:myitemStyle,
emphasis:myitemStyle,
},
encode: { //可以定义 data 的哪个维度被编码成什么
x: [3, 1, 5], // 表示维度 3、1、5 映射到 x 轴。
y: 2, // 表示维度 2 映射到 y 轴。
tooltip: [3, 2, 4], // 表示维度 3、2、4 会在 tooltip 中显示。
label: 3 // 表示 label 使用维度 3。
},
data: [ //每一列称为一个『维度』。维度下标从0开始
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
],
//markPoint:同bar
//markLine:同bar
//markArea:同bar
tooltip:tooltip
},
865
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
