折线图点击背景渐变

如图：移动端用的echarts，点击某一个点，此点的背景渐变。

image.png

代码：

注意：1.我只在本页面引入了折线图，echarts主模块等。本意是想减少体积。

    let ECHARTS = require('echarts/lib/echarts')
    require('echarts/lib/chart/line')
    require('echarts/lib/component/tooltip');

2.也可以全局引入，在main.js

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

main.js全局引入的话，页面使用就要这样写：

 let myChart2 = this.$echarts.init(document.getElementById('line2'));

如下代码用的是1 局部引入echarts。

<template>
<div>
    <div class="index-line" id="line2"></div>
</div>
</template>
<script>
  let ECHARTS = require('echarts/lib/echarts')
  require('echarts/lib/chart/line')
  require('echarts/lib/component/tooltip');
  export default {
      name: '',
      data() {
          return {}
      },
      created() {
          this.$nextTick(() => {
              let option = {
                  backgroundColor:'#f9f9f9',
                  tooltip: {
                      trigger: 'axis',
                      axisPointer: {
                          type: 'shadow',
                          shadowStyle:{
                              color: {
                                  type: 'linear',
                                  x: 0,
                                  y: 0,
                                  x2: 0,
                                  y2: 1,
                                  colorStops: [
                                      {
                                          offset: 0, color: '',
                                      },
                                      {
                                          offset: 1, color: '',
                                      }
                                  ],
                                  global: false // 缺省为 false
                              }
                          }
                      },
                  },
                  grid: {
                      top:'5%',
                      left: '0%',
                      right: '3%',
                      bottom: '2%',
                      containLabel: true
                  },
                  xAxis: {
                      type: 'category',
                      boundaryGap: false,
                      //x轴
                      axisLine: {
                          "show":false
                      },
                      //刻度线
                      axisTick:{
                          "show":false
                      },
                      data: ['周一','周二','周三','周四','周五','周六','周日']
                  },
                  yAxis: {
                      type: 'value',
                      splitNumber : 3,
                      //y轴
                      axisLine: {
                          "show":false
                      },
                      //y轴刻度线（-）
                      axisTick:{       //y轴刻度线
                          "show":false
                      },
                      //y轴网格线
                      splitLine: {
                          // show:false,
                          lineStyle:{
                              color:['#EEE']
                          }
                      },
                  },
                  series: [
                      {
                          type:'line',
                          smooth: true,
                          data:[120, 80, 10, 134, 90, 230, 50],
                          itemStyle: {
                              normal: {
                                  color: "",
                                  lineStyle: {
                                      color: '',
                                      width: 4,
                                  }
                              }
                          },
                      },
                  ]
              }
              // todo 折线图
              let myChart2 = ECHARTS.init(document.getElementById('line2'));
              //折线图线条颜色
              option.series[0].itemStyle.normal.color = '#179286'
              option.series[0].itemStyle.normal.lineStyle.color = '#179286'
              //渐变背景
              option.tooltip.axisPointer.shadowStyle.color.colorStops[0].color = 'rgba(43,255,234,0.1)'
              option.tooltip.axisPointer.shadowStyle.color.colorStops[1].color = 'rgba(2,207,206,0.2)'
              myChart2.setOption(option);
          })
      }
  }
</script>

<style>
  .index{
      width: 100%;
      height: 100%;
  }
  .index-line{
      width: 100%;
      height: 300px;
      overflow-x: auto;
      overflow-y: hidden;
  }
</style>

直接复制代码可自行修改。