echartslinestyle的简单介绍

本篇文章给大家谈谈echartslinestyle，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、echarts中常用的参数
• 2、echarts 自定义图表
• 3、echart树形图实现点击节点完整链路更换颜色
• 4、echarts饼状图的属性（浅认知）
• 5、echarts 模拟迁徙地图怎么单独设置每条航线的颜色？
• 6、echarts报表折线加粗怎么办

echarts中常用的参数

type的参数有：

ECharts 中的 饼图 也支持通过设置 roseType 显示成南丁格尔图。

设置背景颜色：

设置文本颜色：

饼图的话还要将标签的视觉引导线的颜橘漏色设为浅喊大色圆渗烂。

labelLine: {

lineStyle: {

color: 'rgba(255, 255, 255, 0.3)'

}

}

饼图的话还要将标签的视觉引导线的颜色设为浅色。

设置图形的颜色

让默认的显示圆点不显示

是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。

设置x轴间隔

设置读取数据

[img]

echarts 自定义图表

首先附上实现效果，被分了段的柱状图

幸亏了公司的设计师出的难题，不然我也不会去捣鼓这个东西的

这个图表的类型是 pictoriaBar ，在echarts 3.4版本（版本记得不太明确）之后有了这个类型的图

介绍下这个属性的具体用处：

barWidth: 设置柱子的宽度

symbol：设置乎历哗小块的样式

symbolRepeat: 设置柱子上的小块是否重复，我尝试过发现，默认为false，只显示一个小块

symbolOffset： 设置每个柱子的位置（每个柱子的位置需要进行计算得出）

symbolSize: 设置每个小块的大小

constchartInit = {color: ["#7AC9D2","#00C1DE","#00749F","#77BEE8","#1890FF","#3436C7","#0103A0","#000272"],backgroundColor:"transparent",grid: {left:"10px",top:"50px",right:"50px",bottom:"16px",containLabel:true},xAxis: {type:"category",data: ["2018/08/15","2018/10/02","2018/01/19","岁行2018/05/23","2018/09/28","2018/02/21","2018/11/11","2018/06/14"],axisLabel: {color:"#AFBCC4"},axisTick: {show:false},axisLine: {show:false}  },yAxis: {name:"单位",axisLine: {show:false},type:"value",nameGap:10,axisTick: {show:false},axisLabel: {color:"#747677"},splitLine: {lineStyle: {color:"rgba(216,216,216,0.10)",type:"solid"}    }  },legend: {top:20,data: [      {name:"东向西直行",icon:"square"},      {name:"东向西右转",icon:"square"},      {name:"西向东直行",icon:"square"},      {name:"西向东左转",icon:"square"},      {name:"南向北直行",icon:"square"},      {name:"南向北左转",icon:"square"},      {name:"北向南直行",icon:"square"},      {name:"北向南左转",icon:"square"}    ]  },series: [    {name:"东向西直行",type:"pictorialBar",symbol:"roundRect",symbolRepeat:true,// 分节barWidth:10,symbolSize: [10,5],//size,单个symbol的大小data: [120,132,101,134,90,230,210,180]    },    {name:"东向西右转",type:"pictorialBar",barWidth:10,symbolRepeat:true,symbol:"roundRect",symbolOffset: [13,0],// 柱子的位置symbolSize: [10,5],//size,单个symbol的大烂租小data: [220,182,191,234,290,330,310,290]    },    {name:"西向东直行",type:"pictorialBar",symbolRepeat:true,symbol:"roundRect",symbolOffset: [26,0],// 柱子的位置symbolSize: [10,5],//size,单个symbol的大小barWidth:10,data: [150,232,201,154,190,330,410,430]    },    {name:"西向东左转",type:"pictorialBar",symbolRepeat:true,symbol:"roundRect",symbolOffset: [39,0],// 柱子的位置symbolSize: [10,5],//size,单个symbol的大小barWidth:10,data: [320,332,301,334,390,330,320,503]    },    {name:"南向北直行",type:"pictorialBar",barWidth:10,symbol:"roundRect",symbolRepeat:true,symbolOffset: [52,0],// 柱子的位置symbolSize: [10,5],//size,单个symbol的大小data: [820,932,901,934,1290,1330,1320,1222]    },    {name:"南向北左转",type:"pictorialBar",barWidth:10,symbol:"roundRect",symbolRepeat:true,symbolOffset: [65,0],// 柱子的位置symbolSize: [10,5],//size,单个symbol的大小data: [820,932,901,934,1290,1330,1320,1290]    },    {name:"北向南直行",type:"pictorialBar",barWidth:10,symbol:"roundRect",symbolRepeat:true,symbolOffset: [78,0],// 柱子的位置symbolSize: [10,5],//size,单个symbol的大小data: [120,132,101,134,90,230,210,180]    },    {name:"北向南左转",type:"pictorialBar",barWidth:10,symbol:"roundRect",symbolRepeat:true,symbolOffset: [91,0],// 柱子的位置symbolSize: [10,5],//size,单个symbol的大小data: [120,132,101,134,90,230,210,180]    }  ]};

echart树形图实现点击节点完整链路更换颜色

在某些需求下需要用到树形图来表达数据结构，我使用的是 echarts ，关于 echart 树形图的基础配置和使用这里就不展开。

直接上图，这是一个蔽虚基础的树形图demo：

当点击非最末节点的时候，echart的默认行为为收缩该节点的子节点，这个行为会与下面实现的效果有关系，效果：

下面进入实现，一开始思考这个需求的时候，以为跟经常做的柱状图点击更换柱子颜色一样，都是去替换配置，当然某种情况下也是可以实现的，先简单说一下树形图的 data 结构，是使用 children 属性层层嵌套的结构：

按上面的思路，只要监听节点的点击事件，然后获取对应链路相关的节点，更改他们的 lineStyle ，然后 echart 实例重新 setOption 就可以，下面看一下大概实现：

看一下点击节点， echart 带的参数

到这里这种点击更换相关节点 linestyle 的方式就实现，但是这种方式有两个问题：

1.上面我们是假设 value 是唯一的，如果实际开发中 value 有实际用途不能让我们生成唯一的值，这种方桥册法就无法实现。但这个还不是致命的。

2.上面说到，非最末节点点击时，会收缩与展开它的子节点，而我们上面实现高亮的时候是重新 setOption ，会将已操作的交互覆盖掉，点击前效果：

实现高亮的核心还是更换节点属性的 linestyle ，但是不能通过重新 setOption 来实现，在翻遍 echart 配置项的时候，最后看到了一个属性和一个方法：

实现：

先在 echart 配置项中添加 emphasis 时的效果：

因为 emphasis 属性默认是鼠标移入节点时的效果，所以我们手动触发高亮会宏消燃和默认行为冲突，需要一个数组保存点击高亮的节点 dataIndex 。

点击时手动触发相关节点的高亮：

还需要覆盖 emphasis 的默认行为，也就是鼠标移入事件：

实现效果：

点击前：

点击后：

实现了。

我是鸭子，祝你幸福。

echarts饼状图的属性（浅认知）

对各部分内容的认知

title--}}图标的标题内容

        text--》主标题文字

        subtext--》副标题文字

        left-------》主标题文字的对其方式：left，center，right

        x---------》主标题文字的水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）

        y---------》主标题文字垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）

        textStyle--}}主标题文本样式

                       fontSize------》主标题文字大小（单位px）

                        color---------》 主标题文字的颜色

                        fontWeight--》文字字体的自重（粗细）

series---}}所用图表的系列

        type-----》图表类型    

                    ---》type=line ——-折线图 

                    ---》type=bar ——-折线图

                    ---》type=pie ——-饼图 

         radius--》圆的半径

                    ---》['60%','50%']（第一项为圆环内半径，第二项是外半径）

                    ---》'50%' 由空心圆变为实心圆

         center--》圆在画布的位置

                    ---》['50%','50%']（第一项为圆在画布中左右的距离，数值由小到大，方向是由左至右）

                                                 （第二项为圆在画布中上下的位置，数值由小到大，方向是由上至下）

         clockWise : false, //默认逆时针（标题文字显示的角度尺核）

         minAngle: 5,//最小扇区角度（0 ~ 360）

         startAngle:150, //起始角度（0-360）

         emphasis---}} 鼠标移入动态的时候显示的默认样式

         avoidLabelOverlap: false,//是否启用防止标签重叠策略，默认默认开启

         hoverAnimation---》点击放大（开启为true，关闭为false）         

         labelLine---}}指示线

                     show---》指示线显示隐藏（显示为true，隐藏为false）

                    length---》线段的长度

                    lineStyle---}}指示线的样式

                           width---》线条的宽度

                            color---》线条的颜色

                       液燃     opacity---》线条的透明度（范围0-1，0为完全透明）

                    label---}}副文本

                         formatter---》格式化图例文本（ '{b}\n {d}%'）这里是数据项名称+换行+百分比显示

                        其中{b}{d}为字符串模板

                        在不同的图表类型下，含义也不一样

                                折线（区域）图、柱状（条形）图、K线图 :{a}（系列名闹困虚称），{b}（类目值），{c}（数值）,{d}（无）

                                散点图（气泡）图 :{a}（系列名称），{b}（数据名称），{c}（数值数组）,{d}（无）

                                地图 :{a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无）

                               饼图、仪表盘、漏斗图:{a}（系列名称），{b}（数据项名称），{c}（数值）,{d}（百分比）

                    data---》数组对象

echarts 模拟迁徙地图怎么单独设置每条航线的颜色？

在series.data中单独设置lineStyle.Color，也就友扰是要提前局圆处理数桐告塌据，如下图所示

echarts报表折线加粗怎么办

lineStyle: {

            陆碰width: 4 //default value:2

        }

修改线宽或悉敏即可。

具体请参考官方文衫枝档。

关于echartslinestyle和的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。