echart象形图-三角锥形/山峰形/三角形--柱子渐变色，x轴换行显示，加单位显示

效果图：

 <div id="divChart" :style="{ width: '100%', height: '100%' }"></div>

export default {name: "echartDiv",data() {return {option: {tooltip: {trigger: "axis",axisPointer: {type: "none",},formatter: function (params) {//hover到某一柱子时显示单位，例如：“1号商店进货：60个”return params[0].name + ": " + params[0].value + "个";},},grid: {width: "85%",height: "65%",top: "17%",left: "12%",},xAxis: {data: ["1号商店进货", "2号商店进货", "3号商店进货", "4号商店进货"],axisTick: { show: false },axisLine: {lineStyle: {color: "#483D8B",},},axisLabel: {color: "#483D8B",interval: 0,//隔几个显示一次，0表示全部显示fontSize: "12",//x轴字体大小itemSize: "",formatter: function (params) {var newParamsName = ""; // 最终拼接成的字符串var paramsNameNumber = params.length; // 实际标签的个数var provideNumber = 4; // 每行能显示的字的个数var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整/*** 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签*/// 条件等同于rowNumber>1if (paramsNameNumber > provideNumber) {/** 循环每一行,p表示行 */for (var p = 0; p < rowNumber; p++) {var tempStr = ""; // 表示每一次截取的字符串var start = p * provideNumber; // 开始截取的位置var end = start + provideNumber; // 结束截取的位置// 此处特殊处理最后一行的索引值if (p == rowNumber - 1) {// 最后一次不换行tempStr = params.substring(start, paramsNameNumber);} else {// 每一次拼接字符串并换行tempStr = params.substring(start, end) + "\n";}newParamsName += tempStr; // 最终拼成的字符串}} else {// 将旧标签的值赋给新标签newParamsName = params;}//将最终的字符串返回return newParamsName;},},axisPointer: {type: "shadow",},},yAxis: {name: "单位：个",type: "value",//设置Y轴坐标最大、最小值min: 0,max: 100,interval: 20,axisLabel: {color: "#483D8B",},axisTick: { show: false },axisLine: {show: false,lineStyle: {color: "#483D8B",},},splitLine: {show: true,lineStyle: {color: "rgba(  72,61,139,0.7)",type: "dashed",},},},series: [{name: "hill",type: "pictorialBar",barCategoryGap: "5%",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://path://M10 600 Q 95 0 180 600' >//要改成三角图就改成< symbol: 'triangle' >itemStyle: {opacity: 1,color: {//设置渐变颜色type: "linear",//x 和 y 表示起始的坐标，x2 和 y2 表示终点坐标, 所以也就是向下渐变x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: "red", // 0% 处的颜色},{offset: 0.3,color: "rgba(123,104,238, .8)", // 30% 处的颜色},{offset: 1,color: "rgba(123,104,238, .1)", // 100% 处的颜色},],global: false, // 缺省为 false},},emphasis: {itemStyle: {opacity: 1,},},data: [60,95, 70, 52],z: 10,},{name: "glyph",type: "pictorialBar",barGap: "-100%",//设置图的大小，越大底部重叠的越多symbolPosition: "end",symbolSize: 0,symbolOffset: [0, "100%"],data: [],},],},};},mounted() {this.divChart = this.$echarts.init(document.getElementById("divChart"));this.divChart.setOption(this.option);},
};

关于 symbol 的修改参见echart官方文档Documentation - Apache ECharts，此处贴出一小段

circle圆形，rect矩形，roundRect 圆角矩形，triangle 三角形，diamond 菱形，arrow 箭头

echart象形图-三角锥形/山峰形/三角形--柱子渐变色，x轴换行显示，加单位显示相关推荐

经典算法大全51例——3.杨辉三角（又称帕斯卡三角形）
经典算法大全51例--3.杨辉三角(又称帕斯卡三角形) 算法目录合集地址说明题目以及个人题解原理分析思路一--纵向寻踪思路二--横向寻踪代码实现--Java 方式一--纵向寻踪方式二- ...
Vue 中 Echarts实现三角锥形柱形图
前言记录在 vue 中实现echarts 实现三角锥形柱形图效果本文使用 echarts 为 5.x 版本一.效果展示三角锥形柱形图实现效果二.echarts图表配置 dom 中使用.初始化 ...
【数据处理】Python，matplotlib 如何画柱状图？如何画各种类型的柱状图？柱子宽度设置；设置X轴刻度用label显示；设置柱子距离x轴的高度；设置柱体颜色；设置柱体描边；并列、多条柱状图
Base python matlibplot库-- 一.主要参数介绍: bar(left, height, width=0.8, bottom=None, **kwargs) left为和分类数量一致 ...
神秘大三角(判断点与三角形的关系)
题目描述判断一个点与已知三角形的位置关系. 输入输出格式输入格式: 前三行:每行一个坐标,表示该三角形的三个顶点第四行:一个点的坐标,试判断该点与前三个点围成三角形的位置关系 (详见样例) 所有 ...
JAVA三角海伦公式,海伦公式求三角形面积出错求教
该楼层疑似违规已被系统折叠隐藏此楼查看此楼就下面这个程序输入其他的数字都可以算出面积但是当输入3,4,6时计算出面积为零求吧友指出错误在哪 package javaapplication1 ...
在html中写三角,css3怎么写三角形？
网页很多时候都应用了css3来写三角形,那么css3要怎么写三角形呢?下面我们来看一下css3写三角形的方法. css3写三角形(为了好区分姑且按方向区别): HTML代码: css代码:/*箭头向上 ...
linux中倒三角的代码,数字三角形（递归、动态规划）
题目描述: 计算出从三角形的顶至底的一条路径,使该路径经过的数字总和最大(每个数字可以选择往左下或者右下方向,例如下图中的"3"可以选择数字"8"或者" ...
php输出倒三角星号_php打印三角形
php打印三角形,直角三角形.倒直角三角形.等腰三角形的代码.逻辑都是外层循环控制行数,内层循环控制空格或星号的个数. 一.php输出直角三角形<?php for($i=0;$i<=6;$ ...
41_C++_试定义类 TR1（三角形）及其派生类 COL（三角柱体）其中三角形类可以计算三角形的面积和周长；三角柱体类可以计算柱体的体积和表面积【难点：子类初始父类私有成员、子类对象赋值给父类】
题目: 被卡住过的地方 1. 子类的有参构造,初始化父类的私有成员 TRI父类的有参构造TRI(double x1, double y1, double z1){x = x1;y = y1<

echart象形图-三角锥形/山峰形/三角形--柱子渐变色，x轴换行显示，加单位显示

echart象形图-三角锥形/山峰形/三角形--柱子渐变色，x轴换行显示，加单位显示相关推荐

最新文章

热门文章