Echarts折线图

不知道是不是Echarts用的比较少，从它的Demo把代码拷过来，再去改那些样式，感觉十分的费劲啊啊啊啊。在这里把之前项目用到的记录下来，免得又忘了。

// Vue项目 下载安装Echarts包 npm install echarts -D / yarn add echarts -D
// main.js中配置
import echarts from 'echarts' // 引入echarts
Vue.prototype.$echarts = echarts // 引入组件

<div id="myChart" :style="{width: ‘300px‘, height: ‘300px‘}"></div>

// 在mounted里调用

this.orderData = [] // 后台返回的数据放在这里
var dateList = this.orderData.map(function (item) {
  return item.statisticsDate // x轴的值
})
var valueList = this.orderData.map(function (item) {
  return item.totalOrder // y轴的值
})

// 基于准备好的dom，初始化echarts实例
const myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
  // Make gradient line here
  visualMap: [{
    show: false,
    type: 'continuous', // 定义为连续型 viusalMap
    seriesIndex: 1,
    dimension: 0, // 指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度
    min: 0, // 指定 visualMapContinuous 组件的允许的最小值
    max: dateList.length - 1 // 指定 visualMapContinuous 组件的允许的最大值
  }],
  color: '#108ee9',
  tooltip: {
    trigger: 'axis'
  },
  xAxis: [{
    data: dateList
  }],
  yAxis: [{
    splitLine: {
      show: false
    }
  }],
  series: [{
    type: 'line',
    smooth: true, // 是否平滑曲线显示
    showSymbol: true, // 是否显示 symbol（折线上圆点之类的标记 ）, 只有在 tooltip hover 的时候显示。 可以去掉symbol属性了
    symbolSize: 7, // 原点的尺寸
    data: valueList
  }]
})

Echarts折线图Demo