Echart-折线图

来源：互联网发布：js字符串格式化0在前面编辑：程序博客网时间：2024/05/17 03:34

最近做项目用到的echart的一些东西，整理出来供大家参考，写的不是很好，请大家多多提建议，只是列出了一些可能会用到但是不好查的东西

2.折线图

var option= {    color: 'red',//改变折线和转折点的颜色    tooltip: {      show:false, //当前折线图上的某个点高亮显示出来，鼠标移到这个点上的时候高亮不丢失      trigger: 'axis',      //鼠标悬浮在图上的某个转折点的时候显示的数据的颜色      textStyle:{        color:'#fff'       }    },    toolbox: {      show: true,      feature: {        dataZoom: {          yAxisIndex: 'none'        },        dataView: {readOnly: false},        magicType: {type: ['line', 'bar']},        restore: {},        saveAsImage: {}      }    },    grid: { // 控制图的大小，调整下面这些值就可以，给大家附了一张图用来说明每个值的含义        x: 120,        y:30,        x2: 40,        y2: 30    },

    xAxis:  {      name:'星期',//x轴名称      type: 'category',      boundaryGap: false,      data: ['周一','周二','周三','周四','周五','周六','周日'],      //x轴颜色改变      axisLine:{        lineStyle:{          color:'#bbb9bc'        },        textStyle: {          color: '#bbb9bc'        }      },

      //分隔线的颜色      splitLine:{        lineStyle:{          show: true,          // type:'dashed',          color: '#444'        }      },

      //字体颜色      axisLabel: {        textStyle: {          color: '#fff'        }      }    },    yAxis: {      type: 'value',      name:'气温',      axisLabel: {        formatter: '{value} /度',        textStyle: {          color: '#fff'        }      },        //y轴颜色改变      axisLine:{        lineStyle:{          color:'#bbb9bc'        },        textStyle: {          color: '#bbb9bc'        }      },      splitLine:{        lineStyle:{          show: true,          // type:'dashed',          color: '#444'        }      }    },    series: [      {        name:'星期',        type:'line',        data: [11, 11, 15, 13, 12, 13, 10],        lineStyle:{//单个设置线条颜色          normal:{            color: '#ff00ff',            width:3          }        },        itemStyle:{//单个设置点的颜色          normal:{            color: '#ff0000'          },          emphasis: {                 // 也是选中样式            color: "#FF0000"          }        },        symbolSize:18,//标注点的大小        legendHoverLink:true      }    ]  };

阅读全文

0 0