echarts折线图个性化填充、线条、拐点样式

由于每组数据的拐点样式、线条颜色都不一样,所以series里的每组数据都需要单独设置样式。

首先先来看一下完成后的效果吧

具体设置如下

series: [
            {
                name:systemName[0],
                type:‘line‘,
                symbol:‘star‘,//拐点样式
                symbolSize: 8,//拐点大小
                itemStyle : {
                    normal : {
                        lineStyle:{
                            width:3,//折线宽度
                            color:"#FF0000"//折线颜色
                        }
                    }
                },
                data:data[0]
            }
]

每一组折线的数据都如上图所示设置。  

拐点的样式有:

时间: 2024-10-29 19:06:11

echarts折线图个性化填充、线条、拐点样式的相关文章

实现Echarts折线图的虚实转换

需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础上进行的优化.主要的解决思路是:实线和虚线重叠,需要用虚线显示的部分,实线的data设置为 '-'. 1 { 2 name: '温度(°C)', 3 type: 'line', 4 stack: '温度1', 5 itemStyle: { 6 normal: { 7 lineStyle: { //系

echarts折线图动态改变数据时的一个bug

echarts折线图中当增加dataZoom,修改start大于0的时候,会出现折线混乱,变成竖直的线,绘制有问题. 解决方法,在dataZoom中增加filterMode: 'empty' http://gallery.echartsjs.com/editor.html?c=xS1T_X893l&v=2

Echarts折线图的样式修改

option 内属性: //------------------------------------------------------------------------------------------------------------- legend: { data: ['提现人数'], align: 'left', left: 10 },//------------------------------------------------------------------------

echarts 折线图点击高亮

echarts中注册事件很多 ,记录下今天做的折线图点击高亮: 查了api,看了半天,发现折线图点击时只能做到圆点变大,并不能实现点击线条,整条线条高亮,也真是醉了. 上图: 如图所示,只能圆点变大... 贴出代码: function chartModule () { var self = this; var myChart = null; var prevIndex = null; this.init = function () { myChart = echart.init(document

echarts折线图相关

optionJKDLine = { title: { text: '告警数量趋势图', textStyle:{ //标题样式 fontStyle:'normal', fontFamily:'sans-serif', fontSize:12 } }, tooltip: {trigger: 'axis'}, legend: { //图例,默认显示 }, grid: { //图表距离 left: '-3%', right: '5%', bottom: '3%', top:'20%', containL

图表echarts折线图,柱状图,饼状图

总体就是有折线图相关图标的设置,x,y轴的设置,x,y轴或者数据加上单位的设置.饼状图如何默认显示几个数据中的某个数据 折线图:legend(小标题)中间默认是圆圈 改变成直线 在legend设置的时候就改变icon的形状 legend: { data:[ { name:'访问次数', icon:'line' }, { name:'访', icon:'line' }, { name:'访问', icon:'line' }, ], textStyle:{ color:'#fff' }, right

echarts折线图

app.title = '多 X 轴示例'; var colors = ['#5793f3', '#d14a61', '#675bba']; option = { color: colors, tooltip: { trigger: 'title', axisPointer: { type: 'cross' } }, title:{ text:'雨量图',//标题 left:50//离左边50 }, legend: { data:['2016 降水量'], bottom:false, //数据标

echarts 折线图动态x轴及数据

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>ECharts</title></head><body> <!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)--> &l

echarts 折线图百分比 tooltip 实例 两种方法

方法一 在知道有几个类型时:下面有五个类型 tooltip : { show : true, trigger: 'axis', formatter: '{b0}<br/>{a0}: {c0}%<br />{a1}: {c1}%<br />{a2}: {c2}%<br />{a3}: {c3}%<br />{a4}: {c4}%' }, 如图: 方法二 在不知道几个类型时: 自定义类型 client.get("/charList"