echarts柱状图饼图折线图

最近大屏项目里做的首先看看效果

这几个图我将其标为七个部分下方成为echarts1,echarts2往后类推有需要可以直接拷贝下方代码

推荐一个朋友最近发我的echarts图形地址特好用！！

echarts图表集

echarts1 ：

代码地址用div+css手动封装一个3D柱状图_关忆北_的博客-CSDN博客

echarts2：

let chartDom = document.getElementById('cyecharts');
let myChart = echarts.init(chartDom);
// 总额数据
let ze = ["23,380", "24,380", "25,380", "26,380", "33,380", "43,380", "23,380", "23,380", "23,380", "23,380", "23,380", "23,380", "23,380", "23,380"]
// 同比增幅数据
let ta = ['12%', "28%", "34%", '48%', "12%", "38%", '23%', "12%", "38%", '23%', "12%", "38%", '23%', "12%"]
// 行业依赖度数据
let hy = ['23%', "12%", "38%", '23%', "12%", "38%", '23%', "12%", "38%", '23%', "12%", "38%", '23%', "12%"]
// 环比增幅数据
let hb = ['12%', "32%", "24%", '12%', "12%", "38%", '23%', "12%", "38%", '23%', "12%", "38%", '23%', "12%"]
// x轴坐标数据
let dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '则', '会', '自', '动', '缩', '放'];
// 柱状图数据
let data = [220, 182, 191, 234, 290, 330, 182, 191, 310, 523, 442, 321, 90, 149,];
let option = {xAxis: {data: dataAxis, // x轴数据axisLabel: {color: '#fff', // x轴坐标颜色rotate: 45 // 旋转角度},axisTick: {show: false  // 不显示坐标轴刻度},axisLine: {show: false // 显示坐标轴轴线},},grid: {left: '10%',right: '8%',bottom: '16%',top: '24%',},yAxis: {splitLine: {show: true, // 显示网格线lineStyle: {color: "rgba(152,152,152,0.2)" // 网格线颜色}},axisLine: {show: false // 显示坐标轴轴线},axisTick: {show: false // 不显示坐标轴刻度},axisLabel: {color: '#fff' // y轴坐标颜色},name: "万",nameTextStyle: {color: "#FFF"}},tooltip: {show: true, // 显示提示框trigger: "item", // 图例触发backgroundColor: "rgba(0, 0, 0, 0.6)", // 提示框背景颜色borderColor: "rgba(255, 255, 255, 0.8)", // 提示框边框颜色formatter: (params) => { // params 是 formatter 需要的数据集let res = ""res += `<div style="width:160px"><div class="centerflex"><div class="halfbox white">总额：</div><div class="halfbox" style="color: #F2F402;">${ze[params.dataIndex]}</div></div><div class="centerflex"><div class="halfbox white">同比增幅：</div><div class="halfbox">${ta[params.dataIndex]}</div></div><div class="centerflex"><div class="halfbox white">行业依赖度：</div><div class="halfbox">${hy[params.dataIndex]}</div></div><div class="centerflex"><div class="halfbox white">环比增幅：</div><div class="halfbox">${hb[params.dataIndex]}</div></div></div>`return res}},series: [{type: 'bar', // 柱状图barWidth: 8, // 柱宽showBackground: true, // 显示柱状图背景色backgroundStyle: {borderRadius: 16, // 柱状图背景圆角半径color: "rgba(10,21,72)", // 柱状图背景颜色},itemStyle: { // 柱条的颜色 渐变color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#1C7DE1' },{ offset: 0.5, color: '#1CBBF4' },{ offset: 1, color: '#1CBBF4' }]),borderRadius: 16, // 柱状图圆角半径},emphasis: { // 高亮itemStyle: { // 柱状图高亮颜色color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#2E6ADB' },{ offset: 0.7, color: '#1C7DE1' },{ offset: 1, color: '#1C7DE1' }])}},data: data}]
};
// 渲染echarts
option && myChart.setOption(option);

echarts3：

let chartDom = document.getElementById('szecharts');
let myChart = echarts.init(chartDom);
let dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '自', '动', '缩', '放'];
let data = [220, 182, 191, 234, 290, 330, 310, 523, 442, 321, 90, 149,];
let option = {xAxis: {data: dataAxis, // x轴数据axisLabel: {color: '#fff', // x轴坐标颜色rotate: 45 // 旋转角度},axisTick: {show: false  // 不显示坐标轴刻度},axisLine: {show: true // 显示坐标轴轴线},},grid: {left: '10%',right: '8%',bottom: '10%',top: '14%',},yAxis: {splitLine: {show: true, // 显示网格线lineStyle: {color: "rgba(152,152,152,0.2)" // 网格线颜色}},axisLine: {show: true // 显示坐标轴轴线},axisTick: {show: false // 不显示坐标轴刻度},axisLabel: {color: '#fff' // y轴坐标颜色},name: "万",nameTextStyle: {color: "#FFF"}},series: [{type: 'bar', // 柱状图barWidth: 16, // 柱宽showBackground: true, // 显示柱状图背景色backgroundStyle: {borderRadius: 16, // 柱状图背景圆角半径color: "rgba(9,85,130,0.9)", // 柱状图背景颜色},itemStyle: { // 柱条的颜色 渐变color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#FE9748' },{ offset: 0.5, color: '#FE5B56' },{ offset: 1, color: '#FE5B56' }]),borderRadius: 16, // 柱状图圆角半径},emphasis: { // 高亮itemStyle: { // 柱状图高亮颜色color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#FCE067' },{ offset: 0.7, color: '#FE9748' },{ offset: 1, color: '#FE9748' }])}},label: { // 每根柱上添加数值  show: true,position: 'top', // 位置:最上方color: "#E8F011", // 字体颜色fontSize: 12, // 字体大小},data: data}]
};
// 渲染echarts
option && myChart.setOption(option);

echarts4：

let chartDom = document.getElementById('lnecharts');
let myChart = echarts.init(chartDom);
let dataAxis = [2019, 2020, 2021, 2022];
let data = [220, 182, 191, 234];
let arr = ['12%', "32%", "24%", '12%']
let iss = ["降", "降", "升", "降"]
let option = {xAxis: {data: dataAxis, // x轴数据axisLabel: {color: '#C2C3C7', // x轴坐标颜色},axisTick: {show: false  // 不显示坐标轴刻度},axisLine: {show: true, // 显示坐标轴轴线lineStyle: {color: "#562865" // 坐标轴颜色}},name: "年",nameTextStyle: {color: "#C2C3C7"}},grid: {left: '10%',right: '8%',bottom: '14%',top: '20%',},yAxis: {splitLine: {show: true, // 显示网格线lineStyle: {color: "rgba(152,152,152,0.2)" // 网格线颜色}},axisLine: {show: true, // 显示坐标轴轴线lineStyle: {color: "#562865" // 坐标轴颜色}},axisTick: {show: false // 不显示坐标轴刻度},axisLabel: {color: '#C2C3C7' // y轴坐标颜色},name: "万",nameTextStyle: {color: "#C2C3C7"}},series: [{type: 'bar', // 柱状图barWidth: 20, // 柱宽itemStyle: { // 柱条的颜色 渐变color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(235,107,163,1)' },{ offset: 0.5, color: 'rgba(235,107,163,0.8)' },{ offset: 1, color: 'rgba(235,107,163,0.1)' }]),},emphasis: { // 高亮itemStyle: { // 柱状图高亮颜色color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(240,36,98,1)' },{ offset: 0.5, color: 'rgba(240,36,98,0.8)' },{ offset: 1, color: 'rgba(240,36,98,0.1)' }])}},label: { // 每根柱上添加数值  show: true,position: 'top', // 位置:最上方fontSize: 12, // 字体大小color: "#E8F011", // 字体颜色formatter: (params) => {let res = ""res += `{a|${iss[params.dataIndex] == "升" ? arr[params.dataIndex] + "↑" : ''}}{b|${iss[params.dataIndex] == "降" ? arr[params.dataIndex] + '↓' : ''}}\n\t{c|${params.data}}`return res},rich: {a: {color: "#44C74B"},b: {color: "#BB3942"},c: {color: "#F2F204"}}},data: data}]
};
console.log(option);
// 渲染echarts
option && myChart.setOption(option);

echarts5：

let chartDom = document.getElementById('ssecharts');
let myChart = echarts.init(chartDom);
const colors = ['#3E8AE8', '#F47A55'];
let option = {color: colors,tooltip: {trigger: 'none',axisPointer: {type: 'cross'}},legend: {right: "2%",itemStyle: {// color: "#FFF"},textStyle: {color: "#fff"}},grid: {top: '18%',bottom: '12%'},xAxis: [{type: 'category',axisLabel: {color: '#fff', // x轴坐标颜色},axisTick: {show: false  // 不显示坐标轴刻度},axisLine: {show: true // 显示坐标轴轴线},data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月",]},],yAxis: [{type: 'value',splitLine: {show: true, // 显示网格线lineStyle: {color: "rgba(152,152,152,0.2)" // 网格线颜色}},axisLine: {show: true // 显示坐标轴轴线},axisTick: {show: false // 不显示坐标轴刻度},axisLabel: {color: '#fff' // y轴坐标颜色},name: "万",nameTextStyle: {color: "#FFF"}}],series: [{name: '2021',type: 'line', // 折线图smooth: true, // 平滑曲线emphasis: {focus: 'series' // 聚焦当前高亮的数据所在的系列的所有图形},data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]},{name: '2022',type: 'line', // 折线图smooth: true, // 平滑曲线emphasis: {focus: 'series' // 聚焦当前高亮的数据所在的系列的所有图形},data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]}]
};
option && myChart.setOption(option);

echarts6：

let that = this
let chartDom = document.getElementById('srecharts');
let myChart = echarts.init(chartDom);
let selectedIndex = '';
let hoveredIndex = '';
let option = this.getPie3Ds([{name: '水田',value: 260,itemStyle: {color: 'rgba(1,98,200,0.4)',},},{name: '水浇地',value: 44,itemStyle: {color: 'rgba(179,125,36,0.4)',},},],0.59
);
//  修正取消高亮失败的 bug
// 监听 mouseover，近似实现高亮（放大）效果
myChart.on('mouseover', function (params) {// 准备重新渲染扇形所需的参数let isSelected;let isHovered;let startRatio;let endRatio;let k;let i;// 如果触发 mouseover 的扇形当前已高亮，则不做操作if (hoveredIndex === params.seriesIndex) {return;// 否则进行高亮及必要的取消高亮操作} else {// 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）if (hoveredIndex !== '') {// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。isSelected = option.series[hoveredIndex].pieStatus.selected;isHovered = false;startRatio = option.series[hoveredIndex].pieData.startRatio;endRatio = option.series[hoveredIndex].pieData.endRatio;k = option.series[hoveredIndex].pieStatus.k;i = option.series[hoveredIndex].pieData.value === option.series[0].pieData.value ? 35 : 10;// 对当前点击的扇形，执行取消高亮操作（对 option 更新）option.series[hoveredIndex].parametricEquation = that.getParametricEquations(startRatio,endRatio,isSelected,isHovered,k,i);option.series[hoveredIndex].pieStatus.hovered = isHovered;// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空hoveredIndex = '';}// 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）if (params.seriesName !== 'mouseoutSeries') {// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。isSelected = option.series[params.seriesIndex].pieStatus.selected;isHovered = true;startRatio = option.series[params.seriesIndex].pieData.startRatio;endRatio = option.series[params.seriesIndex].pieData.endRatio;k = option.series[params.seriesIndex].pieStatus.k;// 对当前点击的扇形，执行高亮操作（对 option 更新）option.series[params.seriesIndex].parametricEquation = that.getParametricEquations(startRatio,endRatio,isSelected,isHovered,k,option.series[params.seriesIndex].pieData.value + 5);option.series[params.seriesIndex].pieStatus.hovered = isHovered;// 记录上次高亮的扇形对应的系列号 seriesIndexhoveredIndex = params.seriesIndex;}// 使用更新后的 option，渲染图表myChart.setOption(option);}
});// 修正取消高亮失败的 bug
myChart.on('globalout', function () {if (hoveredIndex !== '') {// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。isSelected = option.series[hoveredIndex].pieStatus.selected;isHovered = false;k = option.series[hoveredIndex].pieStatus.k;startRatio = option.series[hoveredIndex].pieData.startRatio;endRatio = option.series[hoveredIndex].pieData.endRatio;// 对当前点击的扇形，执行取消高亮操作（对 option 更新）i = option.series[hoveredIndex].pieData.value === option.series[0].pieData.value ? 35 : 10;option.series[hoveredIndex].parametricEquation = that.getParametricEquations(startRatio,endRatio,isSelected,isHovered,k,i);option.series[hoveredIndex].pieStatus.hovered = isHovered;// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空hoveredIndex = '';}// 使用更新后的 option，渲染图表myChart.setOption(option);
});

这块由于我用的是vue 所以在methods里面还有两个函数用原生的朋友把里面的this跟that都去掉就好

// 生成扇形的曲面参数方程，用于 series-surface.parametricEquationgetParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {// 计算const midRatio = (startRatio + endRatio) / 2;const startRadian = startRatio * Math.PI * 2;const endRadian = endRatio * Math.PI * 2;const midRadian = midRatio * Math.PI * 2;// 如果只有一个扇形，则不实现选中效果。if (startRatio === 0 && endRatio === 1) {isSelected = false;}// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）k = 1;// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;// 计算高亮效果的放大比例（未高亮，则比例为 1）const hoverRate = isHovered ? 1.05 : 1;// 返回曲面参数方程return {u: {min: -Math.PI,max: Math.PI * 3,step: Math.PI / 32,},v: {min: 0,max: Math.PI * 2,step: Math.PI / 20,},x: function (u, v) {if (u < startRadian) {return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;}if (u > endRadian) {return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;}return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;},y: function (u, v) {if (u < startRadian) {return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;}if (u > endRadian) {return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;}return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;},z: function (u, v) {if (u < -Math.PI * 0.5) {return Math.sin(u);}if (u > Math.PI * 2.5) {return Math.sin(u) * h * 0.1;}return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;},};},

/*** 绘制3d图* @param pieData 总数据* @param internalDiameterRatio:透明的空心占比* @param distance 视角到主体的距离* @param alpha 旋转角度* @param pieHeight 立体的高度* @param opacity 饼或者环的透明度*/getPie3D(pieData, internalDiameterRatio, distance, alpha, pieHeight, opacity = 1) {const series = [];let sumValue = 0;let startValue = 0;let endValue = 0;const legendData = [];const k =typeof internalDiameterRatio !== 'undefined'? (1 - internalDiameterRatio) / (1 + internalDiameterRatio): 1 / 3;// 为每一个饼图数据，生成一个 series-surface 配置for (let i = 0; i < pieData.length; i += 1) {sumValue += pieData[i].value;const seriesItem = {name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,type: 'surface',parametric: true,wireframe: {show: false,},pieData: pieData[i],pieStatus: {selected: false,hovered: false,k: k,},};if (typeof pieData[i].itemStyle !== 'undefined') {const itemStyle = {};if (typeof pieData[i].itemStyle.color !== 'undefined') {itemStyle.color = pieData[i].itemStyle.color;}if (typeof pieData[i].itemStyle.opacity !== 'undefined') {itemStyle.opacity = pieData[i].itemStyle.opacity;}seriesItem.itemStyle = itemStyle;}series.push(seriesItem);}// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。for (let i = 0; i < series.length; i += 1) {endValue = startValue + series[i].pieData.value;series[i].pieData.startRatio = startValue / sumValue;series[i].pieData.endRatio = endValue / sumValue;console.log(series[i].pieData.startRatio,series[i].pieData.endRatio,false,false,k,series[i].pieData.value)series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio,series[i].pieData.endRatio,false,false,k,series[i].pieData.value);startValue = endValue;legendData.push(series[i].name);}return series;},

echarts7：

let chartDom = document.getElementById('gcecharts');
let myChart = echarts.init(chartDom);
const optionsData = [{name: 'aa',value: 11,itemStyle: {color: '#41adf8',// opacity: 1,},},{name: 'cc',value: 33,itemStyle: {color: '#ffa100',// opacity: 1,},},{name: 'bb',value: 22,itemStyle: {color: '#2acf81',// opacity: 1,},},
];const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);series.push({name: 'pie2d',type: 'pie',label: {opacity: 1,fontSize: 13,lineHeight: 20,},labelLine: {length: 30,length2: 30,},startAngle: -30, //起始角度，支持范围[0, 360]。clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式radius: ['20%', '50%'],center: ['50%', '50%'],data: optionsData,itemStyle: {opacity: 0,},
});option = {legend: {tooltip: {show: true,},data: ['aa', 'bb', 'cc'],bottom: '10%',right: '10%',textStyle: {color: '#fff',fontSize: 12,},},tooltip: {formatter: (params) => {if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {let bfb = ((option.series[params.seriesIndex].pieData.endRatio -option.series[params.seriesIndex].pieData.startRatio) *100).toFixed(2);return (`${params.seriesName}<br/>` +`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +`${bfb}%`);}},},labelLine: {show: true,lineStyle: {color: '#fff',},},label: {show: true,position: 'outside',color: "#72C5A9",formatter: '{b} \n{c} {d}%',},xAxis3D: {min: -1,max: 1,},yAxis3D: {min: -1,max: 1,},zAxis3D: {min: -1,max: 1,},grid3D: {show: false,boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度viewControl: {alpha: 40,beta: 40,distance: 500, //调整视角到主体的距离，类似调整zoomrotateSensitivity: 0, // 设置为0无法旋转zoomSensitivity: 0, // 设置为0无法缩放panSensitivity: 0, // 设置为0无法平移autoRotate: false, // 自动旋转},},series: series,
};
option && myChart.setOption(option);

 // 生成扇形的曲面参数方程getParametricEquations(startRatio, endRatio, isSelected, isHovered, k, h) {// 计算const midRatio = (startRatio + endRatio) / 2;const startRadian = startRatio * Math.PI * 2;const endRadian = endRatio * Math.PI * 2;const midRadian = midRatio * Math.PI * 2;// 如果只有一个扇形，则不实现选中效果。if (startRatio === 0 && endRatio === 1) {// eslint-disable-next-line no-param-reassignisSelected = false;}// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）// eslint-disable-next-line no-param-reassignk = typeof k !== 'undefined' ? k : 1 / 3;// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;// 计算高亮效果的放大比例（未高亮，则比例为 1）const hoverRate = isHovered ? 1.05 : 1;// 返回曲面参数方程return {u: {min: -Math.PI,max: Math.PI * 3,step: Math.PI / 32,},v: {min: 0,max: Math.PI * 2,step: Math.PI / 20,},x(u, v) {if (u < startRadian) {return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;}if (u > endRadian) {return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;}return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;},y(u, v) {if (u < startRadian) {return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;}if (u > endRadian) {return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;}return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;},z(u, v) {if (u < -Math.PI * 0.5) {return Math.sin(u);}if (u > Math.PI * 2.5) {return Math.sin(u) * h * 0.1;}// 当前图形的高度是Z根据h（每个value的值决定的）return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;},};},

// 生成模拟 3D 饼图的配置项getPie3Ds(pieData, internalDiameterRatio) {const series = [];// 总和let sumValue = 0;let startValue = 0;let endValue = 0;const legendData = [];const k =typeof internalDiameterRatio !== 'undefined'? (1 - internalDiameterRatio) / (1 + internalDiameterRatio): 1 / 3;// 为每一个饼图数据，生成一个 series-surface 配置for (let i = 0; i < pieData.length; i += 1) {sumValue += pieData[i].value;const seriesItem = {name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,type: 'surface',parametric: true,wireframe: {show: false,},pieData: pieData[i],pieStatus: {selected: false,hovered: false,k,},};if (typeof pieData[i].itemStyle !== 'undefined') {const { itemStyle } = pieData[i];// eslint-disable-next-line no-unused-expressionstypeof pieData[i].itemStyle.color !== 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;// eslint-disable-next-line no-unused-expressionstypeof pieData[i].itemStyle.opacity !== 'undefined'? (itemStyle.opacity = pieData[i].itemStyle.opacity): null;seriesItem.itemStyle = itemStyle;}series.push(seriesItem);}// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquations 函数，// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。console.log(series);for (let i = 0; i < series.length; i += 1) {endValue = startValue + series[i].pieData.value;series[i].pieData.startRatio = startValue / sumValue;series[i].pieData.endRatio = endValue / sumValue;series[i].parametricEquation = this.getParametricEquations(series[i].pieData.startRatio,series[i].pieData.endRatio,false,false,k,// 我这里做了一个处理，使除了第一个之外的值都是10series[i].pieData.value === series[0].pieData.value ? 35 : 10);startValue = endValue;legendData.push(series[i].name);}// 准备待返回的配置项，把准备好的 legendData、series 传入。const option = {// animation: false,tooltip: {formatter: (params) => {if (params.seriesName !== 'mouseoutSeries') {return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${option.series[params.seriesIndex].pieData.value}`;}return '';},},legend:{right: 0,textStyle:{color: '#fff'}},xAxis3D: {min: -1,max: 1,},yAxis3D: {min: -1,max: 1,},zAxis3D: {min: -1,max: 1,},grid3D: {show: false,boxHeight: 5,bottom: '0%',viewControl: {// 3d效果可以放大、旋转等，请自己去查看官方配置alpha: 35,// beta: 30,rotateSensitivity: 1,zoomSensitivity: 0,panSensitivity: 0,// autoRotate: true,distance: 150,},// 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。postEffect: {// 配置这项会出现锯齿，请自己去查看官方配置有办法解决enable: false,bloom: {enable: true,bloomIntensity: 0.1,},SSAO: {enable: true,quality: 'medium',radius: 2,},// temporalSuperSampling: {//   enable: true,// },},},series,};return option;}}

有需要直接拷贝就好啦！

echarts柱状图饼图折线图相关推荐

【Echart多场景示例应用】Echarts柱状图、折线图、饼图、雷达图等完整示例。 echarts主标题和副标题的位置、样式等设置（已解决附源码）
**[写在前面]**前端时间做一个echarts的页面调整,临时客户要求加一个参数(总容量)显示,当时我就想用个默认的副标题吧,哪知客户和我说得紧跟在主标题后面,于是乎我就根据设置做了一个调整,我也是 ...
直播app源代码，echarts 柱状图，折线图互转实例
直播app源代码,echarts 柱状图,折线图互转实例的相关代码 function initDayChart(){var myChart = echarts.init(document.getEle ...
关于echarts柱状图和折线图的样式修改
①去除折线图或饼图的虚线其实这里通过颜色就可以定位到设置. tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {co ...
echarts柱状图、折线图渐变色，填充渐变色，鼠标移入样式，双y轴
基础代码都一样,根据配置的seriesDta的type不同,展现出的效果不同,每一个echarts都对应单独的series 版本不同可能实现效果不同,具体查看官网哦. 安装: npm install ...
Echarts 柱状图、折线图和仪表盘的一写属性设置
目录一. 柱状图 1.背景线设置为虚线,lineStyleL里面的type属性为dashed,默认是实线. 2.鼠标放在柱子上的阴影效果,如果用shadow无法设置宽度 3.鼠标放上的tip自定义 ...
Echarts柱状图和折线图动态轮播展示
想通过Echarts实现动态轮播功能,代码如下原创不易,转载请附上原创谢谢, 以下代码复制可用 var dateCity = ["北京","上海"," ...
vue项目中，Echarts柱状图和折线图混合显示
<div ref="myChart" :style="{width: '800px', height: '500px'}"></div> ...
echarts柱状图加折线图
option = { color: ["#0080FF", "#0FDBA2"], title: {textStyle: {color: '#fff',font ...
ECHARTS的基本使用：柱状图、折线图、饼图等
Echarts 是由百度团队打造的一款纯 Javascript 的图表库,官网下载路径如下: http://echarts.baidu.com/download.html Echarts的特性: 丰富 ...

echarts柱状图饼图折线图

echarts1 ：

echarts2：

echarts3：

echarts4：

echarts5：

echarts6：

echarts7：

echarts柱状图饼图折线图相关推荐

最新文章

热门文章

echarts柱状图 饼图 折线图

echarts1 ：

echarts2：

echarts3：

echarts4：

echarts5：

echarts6：

echarts7：

echarts柱状图 饼图 折线图相关推荐

最新文章

热门文章

echarts柱状图饼图折线图

echarts柱状图饼图折线图相关推荐