柱形图点击背景渐变

如图：移动端用的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('bar'));

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

<template>
  <div>
      <div class="index-line" id="bar"></div>
  </div>
</template>
<script>
    let ECHARTS = require('echarts/lib/echarts')
    require('echarts/lib/chart/bar')
    require('echarts/lib/component/tooltip');
    export default {
        name: '',
        data() {
            return {}
        },
        created() {
            this.$nextTick(() => {
                // todo 柱形图
                let myChart4 = ECHARTS.init(document.getElementById('bar'));
                let optionBar = {
                    backgroundColor:'#f9f9f9',
                    color: ['#F09532','#179286'],//柱形图颜色
                    tooltip : {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                            label: {
                                show: true
                            },
                            shadowStyle:{ //点击柱形图背景设置，渐变
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0, color: 'rgba(255,162,61,0.1)',
                                        },
                                        {
                                            offset: 1, color: 'rgba(255,130,23,0.2)',
                                        }
                                    ],
                                    global: false // 缺省为 false
                                }
                            }
                        },
                    },
                    grid: {
                        top:'5%',
                        left: '0%',
                        right: '3%',
                        bottom: '2%',
                        containLabel: true
                    },
                    dataset: {
                        source: [
                            ['1', 43.3, 85.8],
                            ['2', 83.1, 73.4],
                            ['3', 86.4, 65.2],
                            ['4', 72.4, 53.9],
                            ['5', 86.4, 65.2],
                            ['6', 72.4, 53.9],
                            ['7', 86.4, 65.2],
                            ['9', 72.4, 53.9],
                        ]
                    },
                    xAxis: {
                        type: 'category',
                        //x轴
                        axisLine: {
                            "show":false
                        },
                        //刻度线
                        axisTick:{
                            "show":false
                        },
                    },
                    yAxis: {
                        splitNumber : 3,
                        //y轴网格图
                        splitLine: {
                            lineStyle:{
                                color:['#EEE']
                            }
                        },
                        //y轴
                        axisLine: {
                            "show":false
                        },
                        //y轴刻度线（-）
                        axisTick:{       //y轴刻度线
                            "show":false
                        },
                    },
                    series: [
                        {
                            type: 'bar',
                            barGap:'0%',//两个柱形图间隙
                        },
                        {type: 'bar'}
                    ]
                }
                myChart4.setOption(optionBar);
            })
        }
    }
</script>

<style>
    .index{
        width: 100%;
        height: 100%;
    }
    .index-line{
        width: 100%;
        height: 300px;
    }
</style>

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