Echarts折线图的样式修改

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

// X轴数据隔一个显示 通过设置 interval

axisLabel: {

interval: 1

}

//-------------------------------------------------------------------------------------------------------------------------------- // 可以矫正Y轴数据和折线图数据不匹配的问题 并去掉series内stack属性

yAxis: {

type: ‘value‘,

// 可以矫正Y轴数据和折线图数据不匹配的问题 并去掉series内stack属性

min: 0,

max: 18,

data: [0, 3, 6, 9, 12, 15, 18]

},


series: [
{
name:‘邮件营销‘,
type:‘line‘,
stack: ‘总量‘,
data:[120, 132, 101, 134, 90, 230, 210]
}

]

//----------------------------------------------------------------------------------------------------------------------------// 折线图样式改变为曲线  通过true/false 控制 smooth: false,

series: [

{

name: ‘提现人数‘,

smooth: false,

type: ‘line‘,

data: [5, 0, 7, 2, 1, 5, 1, 2, 3, 4, 5, 0, 0, 16, 2, 5, 7, 3, 1, 5, 2, 7, 2, 5, 6, 0, 2, 5, 3, 3],

}

}

]

//-------------------------------------------------------------------------------------------------------------------------------//  折线的宽度颜色修改//1.

series: [

{

name: ‘提现人数‘,

smooth: false,

type: ‘line‘,

data: [5, 0, 7, 2, 1, 5, 1, 2, 3, 4, 5, 0, 0, 16, 2, 5, 7, 3, 1, 5, 2, 7, 2, 5, 6, 0, 2, 5, 3, 3],

    //  折线的宽度颜色修改

lineStyle: {

normal: {

color: ‘#61a2ec‘,

width: 2

}

}

}

]

//2. 与series同级添加color 需对应匹配

color: [‘#61a2ec‘]

 

原文地址:https://www.cnblogs.com/NZ12/p/12069279.html

时间: 2024-11-10 00:11:50

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折线图相关

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 折线图点击高亮

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

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

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

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

由于每组数据的拐点样式.线条颜色都不一样,所以series里的每组数据都需要单独设置样式. 首先先来看一下完成后的效果吧 具体设置如下 series: [ { name:systemName[0], type:'line', symbol:'star',//拐点样式 symbolSize: 8,//拐点大小 itemStyle : { normal : { lineStyle:{ width:3,//折线宽度 color:"#FF0000"//折线颜色 } } }, data:data

echarts itemStyle 折线图原点样式调整

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