超全的echarts折线图样式整理

本次记录了echarts的折线颜色修改、自定义展示折线最后一个数值内容、自定义折线内容颜色、自定义折线图缩放展示、x轴线条粗细调整、x轴箭头单箭头调整、y轴线条粗细调整、自定义图例位置、自定义下载按钮颜色和大小设置等功能。

功能如下图：

详细代码如下：

option = {title: {top: 10,text: '标题（title）',left: 'center',textStyle: {//字体风格,'normal','italic','oblique'fontStyle: 'normal',//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...fontWeight: 'bolder',//字体系列fontFamily: 'san-serif',//字体大小fontSize: 40}},legend: {show: true, //是否显示图例itemGap: 8, //图例间距right: 2,top: 40,bottom: 40,orient: 'vertical',//图例大小itemHeight: 8,itemWidth: 12,textStyle: {//图例字体大小fontSize: 20,fontWeight: 'bolder'}},toolbox: {top: "top",//设置展示位置right: "2%",//设置与右侧的边距iconStyle: {borderColor: "#888888",  // 图标默认颜色},emphasis: {iconStyle: {borderColor: "#54C3F1",  // 图标hover颜色},},itemSize: 20, // 设置图标大小feature: {saveAsImage: {}//展示下载按钮}},grid: {//图表与边框的距离top: 60,right: 145,left: 50,bottom: 70},tooltip: {trigger: 'axis',align: 'left',extraCssText: '100px;',appendToBody: true},dataZoom: [//加上dataZoom可实现缩放{type: 'inside',//x轴xAxisIndex: 0,},{show:true,type: 'slider',//x轴xAxisIndex: 0,zoomOnMouseWheel:'alt',//如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。},],xAxis: {name: 'x轴单位',nameLocation: 'middle', //标题位置居中splitLine: {//网格线show: false},nameTextStyle: {color: '#888888', //  字体颜色fontSize: 26, //  字体大小fontWeight: 'bolder',//关键代码padding: [10, -800, 66, 0] //标题位置调整 上 右 下 左},axisTick: {show: true, //是否展示刻度线inside: true //刻度线朝内还是朝外},axisLine: {//坐标轴轴线相关设置show: ' ', //是否显示坐标轴轴线onZero: ' ', //X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度onZeroAxisIndex: '12', //当有双轴时，可以用这个属性手动指定，在哪个轴的 0 刻度上symbol: ['none', 'path://M250 150 L150 350 L350 350 Z'], //轴线两边的箭头symbolSize: [10, 10], //轴线两边的箭头的大小，第一个数字表示宽度（垂直坐标轴方向），第二个数字表示高度（平行坐标轴方向）lineStyle: {color: '#888888', //坐标轴线线的颜色width: '4' //坐标轴线线宽}},axisLabel: {//默认展示最后一个点fontSize: '20', //文字的字体大小fontWeight: 'bold',showMaxLabel: true},type: 'value' //类型},yAxis: {name: 'y轴单位',nameTextStyle: {//  单位样式color: '#888888', //  字体颜色fontWeight: 'bold',fontSize: 24 //  字体大小},axisLine: {show: true, //是否显示y轴symbol: ['none', 'path://M250 150 L150 350 L350 350 Z'], //轴线两边的箭头lineStyle: {color: '#888888', //坐标轴线线的颜色width: '4' //坐标轴线线宽}},axisTick: {//是否展示刻度线show: true,inside: true //刻度线朝内还是朝外},axisLabel: {//默认展示最后一个点fontSize: '20', //文字的字体大小fontWeight: 'bold',//加粗showMaxLabel: false},splitLine: {//网格线show: false},type: 'value',show: true},series: [{name: '消费人群1',data: [[1, 10], [2, 20], [3, 30], [4, 40], [5, 50], [6, 50], [7, 70],[8, 80], [9, 89], [10, 99], [11, 102], [12, 89], [13, 88], [19, 60], [20, 80]],symbol: 'circle', //将小圆点改成实心 不写symbol默认空心symbolSize: 15, //小圆点的大小type: 'line', //折线类型itemStyle: {normal: {color: 'red',//折线图与小圆点颜色lineStyle: {width: 9 //线条宽度}}},endLabel: {show: true,fontSize: 24,color: 'red',formatter: function (value) {return value.seriesName;}},labelLine: {showAbove: true}},{name: '消费人群2',data: [[1, 105],[2, 125],[3, 135],[4, 145],[5, 155],[6, 155],[7, 175],[8, 185],[9, 185],[10, 159],[11, 172],[12, 165],[13, 185], [19, 165],[20, 121]],symbol: 'circle', //将小圆点改成实心 不写symbol默认空心symbolSize: 6, //小圆点的大小itemStyle: {normal: {lineStyle: {width:4//线条宽度}}},type: 'line', //折线类型endLabel: {show: true,fontSize: 24,formatter: function (value) {return value.seriesName;}},labelLine: {showAbove: true}},{name: '消费人群3',data: [[1, 20],[2, 10],[3, 20],[4, 30],[5, 40],[6, 30],[7, 30],[8, 20],[9, 39], [10, 49],[11, 42],[12, 40],[13, 38],[19, 20],[20, 30]],symbol: 'circle', //将小圆点改成实心 不写symbol默认空心symbolSize: 6, //小圆点的大小itemStyle: {normal: {lineStyle: {width:4//线条宽度}}},type: 'line', //折线类型endLabel: {show: true,fontSize: 24,formatter: function (value) {return value.seriesName;}},labelLine: {showAbove: true}}]
};

如果感觉有用，记得点个赞哦！您的鼓励是我持续更新的动力，一起努力，一起变更强，加油

end

超全的echarts折线图样式整理相关推荐

1、【Echarts系列】Vue中设置echarts折线图样式(图表、网格、标签、提示、标题、文字)，手把手教程系列
一.echarts 折线图(折线统计图) 折线图在我们也是我们的数据可视化图表中最常用的一种图表之一,是用折线将各个数据点标志连接起来的图表,不仅可以表示数量的多少,而且可以反映同一事物在不同时间里的 ...
Echarts折线图样式修改(拐点大小,拐点边框大小及颜色,hover拐点内填充颜色等)
项目需求: 折线图hover 时拐点大小不变;hover时拐点内空心点填充为实心,定义拐点颜色,边框线大小以及颜色等,下面简单演示修改拐点样式: option = {title: {text: '堆叠 ...
echarts折线图设置圆点_echarts 设置折线图单个数据小圆圈样式
在使用echarts 折线图时,可能会遇到针对不同的数据显示不同的小圆点样式,经过查看echarts配置项,其中data中有一个value配置项选项,可以单独设置某一个数据的显示样式,具体使用方式如下 ...
echarts折线图拐点样式设置
echarts折线图拐点样式设置代码详情: series: [{name: '发文篇数',type: 'line',// smooth: true,showSymbol: true,symbol: ...
echarts折线图折现下方显示阴影
echarts折线图折现下方显示阴影实现echarts折现下方显示渐变阴影区域代码: series: [{name: this.chartPropList[this.dataResource]. ...
echarts折线图动态多条线
echarts折线图配置项由于工作中遇到的图表特别多,每次用过配置项总是想不起来,在这里记录一下,希望也可以帮到路过的你.话不多说我们上图: 左边的是设计稿,右边的是echarts的示例图,我们先找 ...
e-charts折线图自适应外层div大小
问题描述: 在tabs页签下使用e-charts折线图,切换tab页签e-charts折线图无法自适应外层div大小: 解决方案: 添加监听器监听浏览窗口变化,两种监听方法 window.addEve ...
python做动态折线图_python matplotlib折线图样式实现过程
python matplotlib 同时画箱线图和折线图的问题 python3 matplotlib画两个折线图,X轴相同,Y轴生...你的memo和cpui里面是字符串,不是数字将memo.app ...
echarts折线图各段设置不同颜色
echarts折线图各段设置不同颜色可以通过设置 visualMap 属性,来控制不同线段的颜色: 文档连接: https://echarts.apache.org/zh/option.html#v ...

超全的echarts折线图样式整理

超全的echarts折线图样式整理

功能如下图：

详细代码如下：

如果感觉有用，记得点个赞哦！您的鼓励是我持续更新的动力，一起努力，一起变更强，加油

end

超全的echarts折线图样式整理相关推荐

最新文章

热门文章