百度ECharts使用

之前觉得ehcarts样式很难设置，连文档都那么多内容，感慨自己跟大神相差了一个银河系
但只要认真看文档和百度，经验多了自然就能很好地使用了

各大组件

option: {
  title: {},    // 图表标题
  grid:{},      // 网格
  legend: {},   // 图例
  xAxis: {},    // x轴
  yAxis: {},    // y轴
  tooltip: {},  // 提示框
  series: []    // 系列列表
}

详情

option = {

  // 设置背景色
  backgroundColor: '#0099CC',

  // 设置图例颜色
  color: ['#1E9FFF', '#5FB878', '#666'],

  // 图表标题
  title: {
    text: '环境检测',
    top: 10,
    left: 10,

    textStyle: {
        color: '#fff',
        fontSize: 14,
    }
  },

  // 图例
  legend: {
    type: 'scroll',
    icon: 'rect',  // 图例图形，circle/rect/roundRect/triangle/diamond/pin/arrow/none
    // orient:'vertical',   // 默认水平排
    right: 10,
    top: 10,
    itemHeight: 10,
    borderRadius: 40,

    itemWidth: 15,
    itemGap: 20,   // 图例间的间隔，横向布局时为水平间隔，纵向则纵向间隔

    data: ['温度', '湿度', 'PM2.5'],

    textStyle: {
      color: '#fff'
    },

    selected: {  // 默认选中的图例
      '温度': true,
      '湿度': false,
      'PM2.5': false
    }
  },

  // 设置网格在父div内的位置
  grid: {
    top: '60',
    left: '40',
    right: '40',
    bottom: '40'
  },
  
  xAxis: {
    type: 'category',   // 还有其他的type，可以去官网喵两眼哦
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],   // x轴数据
    //name: '日期',   // x轴名称

    axisLabel: {
      fontSize: 10,
      margin: 12,
      rotate: -30,  // x轴坐标倾斜角度
    },
    axisLine: {
      lineStyle: {
        color: '#fff' //更改坐标轴颜色
      }
    },

    boundaryGap: false,   // false 为从0刻度开始
  },

  yAxis: {
    type: 'value',
    name: '℃',   // y轴名称

    nameTextStyle: {
      lineHeight: 10
    },

    // 刻度标签
    axisLabel: {
      fontSize: 10,
      rotate: 30,
      margin: 8,   // 刻度标签和轴线的距离
    },

    axisTick: {
      inside: true  // 刻度是否朝外
    },
    axisLine: {
      lineStyle: {
        color: '#fff' //更改坐标轴颜色
      }
    }
  },
  
  tooltip: {
    trigger: 'axis'   // axis   item   none三个值
  },
            
  // 数据                
  series: [ 
    {
      name: '温度',
      data: [34, 82, 93, 90, 93, 129, 133, 132],
      type: 'line',
      showSymbol: false,
      lineStyle: {
         1,
        color: '#1E9FFF'
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {offset: 0, color: "#1E9FFF"},
              {offset: 0.5, color: "#1E9FFF"},
              {offset: 1, color: "#1E9FFF"}
            ])
          }
        }, //填充区域样式，渐变色
      },
  // 略...
  ]
}

vue 中使用 echarts

使用哪个组件就引入哪个

import ECharts from 'vue-echarts';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/title';
import 'echarts/lib/component/tooltip';  // 提示框组件
import 'echarts/lib/component/legend';      // 图例

安装和使用官方文档：
Vue-ECharts

echart使用setOption(option)方法刷新数据，图表也会自动更新

echart关闭鼠标悬浮时的提示框，tooltip是提示框组件
tooltip:{
show:false
}
鼠标悬停在echarts的图表上时，解决提示框超出范围
tooltip:{
confine: true
}

折线图是两个数据点之间用线连接起来，为了追求美观或特殊的效果，
还可以如上图将两点之间用曲线连接，这种图又叫曲线图或样条图样条，样条图与折线图用法相同
serices中添加smooth:true即可

设置折线图标记（点点）的大小，serices中symbolSize：4

关闭折线变化时的的动画
series:[
animation:false
]

设置折线图和容器的间距，grid属性

设置echart横纵坐标
echarts x y轴设置

扩展最小最大值
https://zhidao.baidu.com/question/1800009353089958507.html

设置折线图背景渐变
https://www.cnblogs.com/myfirstboke/p/11038183.html
series.areaStyle.normal.color

echarts刻度格式支持两种方式
https://www.echartsjs.com/option.html#xAxis.axisLabel.formatter

设置折线图为梯形图
series:[
step:true
]

去掉x轴突出的短线
xAxis:{
axisTick:{
show:false
},
}

取消鼠标悬浮高亮
hoverAnimation:false

提示框添加点击或touch时的十字
tooltip:｛
type:'cross'虚线
label:{
backgroundColor:'#6a7985'
}
｝

tooltip:{
axisPointer:{
snap:true //开启自动吸附
}
}

设置tooltip在容器中的位置和样式
tooltip:{
position:[0,0]
extraCssText:'bor-shadow:0 0 3px #ccc' //附加样式
}

资料

百度 echarts 官方文档
Echarts line折线图使用(vue)