这是我学习vue-Echarts的笔记，并不是完全品。是我，对我使用Echarts时所用到的知识进行学习，有待后面补充完善。

一、饼图
- (1)、饼图圆圈大小的调整`series.radius`
- (2)、完整代码配置
二、折线图
- (1)、折线图的折线上标记的图形拐点常见的样式修改。
- (2)、折线图的线样式修改`series.lineStyle`
- (3)、完整代码配置
三、柱形图
- (1)、给柱形图的柱子加上背景颜色`series.backgroundStyle.color`
- (2)、柱形图的柱子颜色渐变
- (3)、完整代码配置

一、饼图

(1)、饼图圆圈大小的调整`series.radius`

series.radius是一个[],数组的第一项是内半径（%），第二项是外半径（%）。

  series: [{name: '档案盒使用统计',type: 'pie',radius: ['60%', '85%'],//数组的第一项是内半径（%），第二项是外半径（%）。 }]

(2)、完整代码配置

         option = {tooltip: {trigger: 'item',formatter: '{a} <br/>{b}: {c} ({d}%)'},color: ['#4b77be', '#fe4848'],series: [{name: '档案盒使用统计',type: 'pie',radius: ['60%', '85%'],avoidLabelOverlap: false,label: {show: false,position: 'center'},emphasis: {label: {show: false}},labelLine: {show: false},data: [{value: this.list.used,name: '已使用'},{value: this.list.notUsed,name: '未使用'}]}]}

二、折线图

(1)、折线图的折线上标记的图形拐点常见的样式修改。

图形拐点的形状series.symbol:
circle(实心○), rect(□), roundRect(边框带弧度的□), triangle（△）, diamond（◇）, pin(水滴形),arrow (箭头形),none（无）
图形拐点大小series.symbolSize = num,
图形拐点的样式series.itemStyle.normal,

        series: [{name: '归还',type: 'line',stack: 'Total',smooth: true,symbolSize: 13, //改变折线上的圆点大小symbol: 'circle', //拐点设置为实心圆itemStyle: {normal: {color: '#3723f4',borderColor: '#fff', //拐点边框颜色borderWidth: 1 //拐点边框大小}},data: this.list.back_week},{name: '归档',type: 'line',stack: 'Total',smooth: true,symbolSize: 13, //改变折线上的圆点大小symbol: 'arrow', //拐点设置为箭头形itemStyle: {normal: {color: '#c523f4',borderColor: '#fff', //拐点边框颜色borderWidth: 1 //拐点边框大小}},data: this.list.file_week},{name: '借阅',type: 'line',stack: 'Total',smooth: true,symbolSize: 13, //改变折线上的圆点大小symbol: 'none', //拐点不显示itemStyle: {normal: {color: '#41f423',borderColor: '#fff', //拐点边框颜色borderWidth: 1 //拐点边框大小}},data: this.list.borrow_week},{name: '入库',type: 'line',stack: 'Total',smooth: true,symbolSize: 13, //改变折线上的圆点大小symbol: 'pin', //拐点设置为水滴形itemStyle: {normal: {color: '#f45e23',borderColor: '#fff', //拐点边框颜色borderWidth: 1 //拐点边框大小}},data: this.list.storage_week}]

(2)、折线图的线样式修改`series.lineStyle`

        series: [{name: '归还',type: 'line',stack: 'Total',smooth: true,lineStyle: {width: 4,//线条粗细color: '#3723f4'//线条颜色},data: this.list.back_week},{name: '归档',type: 'line',stack: 'Total',smooth: true,lineStyle: {width: 4,//线条粗细color: '#c523f4'//线条颜色},data: this.list.file_week},{name: '借阅',type: 'line',stack: 'Total',smooth: true,lineStyle: {width: 4,//线条粗细color: '#41f423'//线条颜色},data: this.list.borrow_week},{name: '入库',type: 'line',stack: 'Total',smooth: true,lineStyle: {width: 4,//线条粗细color: '#f45e23'//线条颜色},data: this.list.storage_week}]

(3)、完整代码配置

      option = {backgroundColor: '#021736', // echarts图表的背景颜色，默认为透明title: {text: '进7日案件流转分析',show: false},tooltip: {trigger: 'axis'},legend: {icon: 'rect',itemHeight: 6, //修改icon图形大小align: 'right', //修改图标和文字的前后位置textStyle: {color: '#c3cad9',fontSize: 18,fontFamily: 'SourceHanSansCN-Regular'},data: ['归还', '归档', '借阅', '入库']},color: ['#3723f4', '#c523f4', '#41f423', '#f45e23'],grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'category',boundaryGap: true, //为true时，不从圆点开始data: ['12/05','12/06','12/07','12/08','12/09','12/10','12/11'],// x轴的字体样式axisLabel: {show: true,textStyle: {color: '#657ca8',fontSize: '14',fontFamily: 'SourceHanSansCN - Regular'}},// 控制网格线是否显示splitLine: {show: true,//  改变轴线颜色lineStyle: {// 使用深浅的间隔色color: '#192c4e'}},// x轴的颜色和宽度axisLine: {lineStyle: {color: '#192c4e',width: 1 //这里是坐标轴的宽度,可以去掉}}},yAxis: {type: 'value',axisLabel: {show: true,textStyle: {color: '#657ca8',fontSize: '14',fontFamily: 'SourceHanSansCN - Regular'}},// y轴的颜色和宽度axisLine: {lineStyle: {color: '#192c4e',width: 1 //这里是坐标轴的宽度}},// 控制网格线是否显示splitLine: {show: true,//  改变轴线颜色lineStyle: {// 使用深浅的间隔色color: '#192c4e'}}},series: [{name: '归还',type: 'line',stack: 'Total',smooth: true,symbolSize: 13, //改变折线上的圆点大小symbol: 'circle', //拐点设置为实心⚪itemStyle: {normal: {color: '#3723f4',borderColor: '#fff', //拐点边框颜色borderWidth: 1 //拐点边框大小}},lineStyle: {width: 4, //线条粗细color: '#3723f4' //线条颜色},data: this.list.back_week},{name: '归档',type: 'line',stack: 'Total',smooth: true,symbolSize: 13, //改变折线上的圆点大小symbol: 'arrow', //拐点设置为箭头形itemStyle: {normal: {color: '#c523f4',borderColor: '#fff', //拐点边框颜色borderWidth: 1 //拐点边框大小}},lineStyle: {width: 4, //线条粗细color: '#c523f4' //线条颜色},data: this.list.file_week},{name: '借阅',type: 'line',stack: 'Total',smooth: true,symbolSize: 13, //改变折线上的圆点大小symbol: 'none', //拐点设置为不显示itemStyle: {normal: {color: '#41f423',borderColor: '#fff', //拐点边框颜色borderWidth: 1 //拐点边框大小}},lineStyle: {width: 4, //线条粗细color: '#41f423' //线条颜色},data: this.list.borrow_week},{name: '入库',type: 'line',stack: 'Total',smooth: true,symbolSize: 13, //改变折线上的圆点大小symbol: 'pin', //拐点设置为水滴形itemStyle: {normal: {color: '#f45e23',borderColor: '#fff', //拐点边框颜色borderWidth: 1 //拐点边框大小}},lineStyle: {width: 4, //线条粗细color: '#f45e23' //线条颜色},data: this.list.storage_week}]}

三、柱形图

(1)、给柱形图的柱子加上背景颜色`series.backgroundStyle.color`

       series: [{data: this.list.eight_year_data,type: 'bar',barWidth: 15,showBackground: true,backgroundStyle: {color: '#0b224d'//改变柱子的背景颜色},}]

(2)、柱形图的柱子颜色渐变

        series: [{data: [18, 16, 8, 10, 5, 24],type: 'bar',showBackground: false,barWidth: '16px', //柱体宽度itemStyle: {barBorderRadius: [2, 2, 0, 0], //柱体圆角   color: new echarts.graphic.LinearGradient(//前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。//通过修改前4个参数，可以实现不同的渐变方向/*第五个参数则是一个数组，用于配置颜色的渐变过程。每项为一个对象，包含offset和color两个参数*/0, 0, 0, 1, [{//代表渐变色从正上方开始offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色color: '#09b0fa'}, //柱图渐变色{offset: 1, //指100%处的颜色color: '#2778ff'}]),}]

(3)、完整代码配置

        option = {tooltip: {trigger: 'axis'},title: {text: '总流转',top: '5%',textStyle: {fontSize: 17,color: '#ffffff',fontWeight: 'normal'}},xAxis: {type: 'category',boundaryGap: true, //为true时，不从圆点开始data: ['2019/6','2019/7','2019/8','2019/9','2019/10','2019/11','2019/12'],// x轴的字体样式axisLabel: {interval: 0,show: true,textStyle: {color: '#657ca8',fontSize: '12',fontFamily: 'SourceHanSansCN - Regular'}},// 控制网格线是否显示splitLine: {show: true,//  改变轴线颜色lineStyle: {// 使用深浅的间隔色color: '#192c4e'}},// x轴的颜色和宽度axisLine: {lineStyle: {color: '#192c4e',width: 1 //这里是坐标轴的宽度,可以去掉}}},yAxis: {type: 'value',axisLabel: {show: true,textStyle: {color: '#657ca8',fontSize: '12',fontFamily: 'SourceHanSansCN - Regular'}},// y轴的颜色和宽度axisLine: {lineStyle: {color: '#192c4e',width: 1 //这里是坐标轴的宽度}},// 控制网格线是否显示splitLine: {show: true,//  改变轴线颜色lineStyle: {// 使用深浅的间隔色color: '#192c4e'}}},series: [{data: this.list.eight_year_data,type: 'bar',barWidth: 15,showBackground: true,backgroundStyle: {color: '#0b224d'},itemStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#09b0fa' // 0% 处的颜色},{offset: 1,color: '#2778ff' // 100% 处的颜色}],global: false // 缺省为 false}}}]}

echarts使用笔记总结3：series使用方法相关推荐

Qt+ECharts开发笔记（五）：ECharts的动态排序柱状图介绍、基础使用和Qt封装Demo
若该文为原创文章,转载请注明原文出处本文章博客地址:https://hpzwl.blog.csdn.net/article/details/127171413 红胖子(红模仿)的博文大全:开发技术集 ...
echarts学习笔记1
可视化面板介绍应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出. [外链图片转存失败,源站可 ...
Echarts实现省级地图的两种方法（以浙江省为例）
Echarts实现省级地图的两种方法(以浙江省为例) 在echarts调用地图时,我们往往会使用GeoJson格式的数据,根据网上的资料,会发现官网会提供世界.中国以及各省的数据.但是,访问下载最新的 ...
关于Echarts柱状图点击事件的实现方法charsjs柱状图点击事件
关于Echarts柱状图点击事件的实现方法 charsjs柱状图点击事件 ajax请求数据 var chartDom = document.getElementById('riskmain'); va ...
Go学习笔记07-结构体与方法
Go学习笔记07-结构体与方法 Go语言面向对象结构的定义与创建面向对象 Go语言只支持封装,不支持继承和多态. Go语言中只有struct,即结构体:没有class. 结构的定义与创建 pac ...
series 合并pandas_在python中pandas的series合并方法
如下所示: In [3]: import pandas as pd In [4]: a = pd.Series([1,2,3]) In [5]: b = pd.Series([2,3,4]) In [ ...
ipad中的神级笔记软件 Notability的使用方法
我一直向所有打算用ipad记手写笔记的同学强烈安利notability这款软件,现在就来向大家一一介绍他的功能和用法. 笔记归类打开notability后先点击右上角建立一个新的笔记,当你创立了几个 ...
设计模式学习笔记-2 创建者模式-工厂方法模式
设计模式学习笔记-2 创建者模式-工厂方法模式工厂模式介绍工厂模式又称工厂方法模式,是一种创建型设计模式,其在父类中提供一个创建对象的方法,允许子类决定实例化对象的类型. 这种设计模式使Java开 ...
notability整理归档_ipad记手写笔记软件 Notability的使用方法图解教程
我一直向所有打算用ipad记手写笔记的同学强烈安利notability这款软件,现在就来向大家一一介绍他的功能和用法. 笔记归类打开notability后先点击右上角建立一个新的笔记,当你创立了几个 ...

echarts使用笔记总结3：series使用方法

series使用方法

一、饼图

(1)、饼图圆圈大小的调整`series.radius`

(2)、完整代码配置

二、折线图

(1)、折线图的折线上标记的图形拐点常见的样式修改。

(2)、折线图的线样式修改`series.lineStyle`

(3)、完整代码配置

三、柱形图

(1)、给柱形图的柱子加上背景颜色`series.backgroundStyle.color`

(2)、柱形图的柱子颜色渐变

(3)、完整代码配置

echarts使用笔记总结3：series使用方法相关推荐

最新文章

热门文章

echarts使用笔记总结3：series使用方法

series使用方法

一、饼图

(1)、饼图圆圈大小的调整series.radius

(2)、完整代码配置

二、折线图

(1)、折线图的折线上标记的图形拐点常见的样式修改。

(2)、折线图的线样式修改series.lineStyle

(3)、完整代码配置

三、柱形图

(1)、给柱形图的柱子加上背景颜色series.backgroundStyle.color

(2)、柱形图的柱子颜色渐变

(3)、完整代码配置

echarts使用笔记总结3：series使用方法相关推荐

最新文章

热门文章

(1)、饼图圆圈大小的调整`series.radius`

(2)、折线图的线样式修改`series.lineStyle`

(1)、给柱形图的柱子加上背景颜色`series.backgroundStyle.color`