下载组件

链接:下载地址 提取码: 1g1h

html

<echarts :option="option2" style="height: 300px;" @click="echartsClick"></echarts>

js

<script>
    import Echarts from '@/components/echarts/echarts.vue'
    export default {
        data() {
            return {
                option2: {},
            };
        },
        components: {
            Echarts,
        },

        mounted() {
            var that = this;
            var icon =
                'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAABDCAMAAABjnP3jAAAAilBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAQEAAAAAAAAAAAAAAAAAAAAAAAAAAADT09MAAAAAAAAAAAAAAAD////8/Pz5+fnr6+v8/Pzr6+vZ2dn09PTFxcX+/v719fX6+vrf39+5ubnDw8MSEhIrKytRUVF2dnZAQEDi4uLi4uLk5OTk5OT///+tdFIzAAAALXRSTlMABQgNFBwDNS4mCxEYIyAamisoMS364t9b57qWj3b0s6mec28rJhMNDKemZ2YvJtR9AAACMUlEQVRo3u2ZaW/iMBBAaTDdxI7tOCeF0vvaY/7/39sZJ2BgKyUrxNBKfh+RyHtMJkhJZl+Ja+LqzHjJ53rvTs5OX/Gp/n350DZwZu66h+X7vwmoT5YtMNEuE0w48n/cAiO3H0NB+P2cfioYZhDmD8yEs0ABydsNMHPzllDA4Jd/gJ3fEguGADm/B3bu5xIDhgGoFthpFY2gD5iLBthpxHwbIFUOFyBX8osE4ApYuAAWl4ACaAUuE0BLMAQs4AIsYkAMiAExIAbEgBgQA2JADIgB+wF3wE5zENABO+1+gF0BOytLAdt7ww2ws6F7w93d8Sv/M6LXg9tz8wzMPJsQQFuoH4GVR007uA2gEbz8AkZ+vtAAKMAXSBpB+dQBE91TSQOQ5N+NAAvSzapr4Mw03WqToj8MoN8CX+DSqvoxjQKOKCZ+sapS5/20AeFZsaQCozPn6jodpcLO4tiPH6aj1LVzmTbkl1d9QCgQmGC0zsYpHc6qOPDj73JlNo7WBvVi5w8FiU/IrV2MY2hWabHnT11GRx7H2tzrk+APBZiglJhATqerTIvgL2msuZiAUqgP/lBACYnEiAlgJu1sXQz+mrZK4JEnINFO+utT3prJfmczKiB/1m+V/I+3Zie+N8QGJazJ3Bpg7TJjhUL7ae8Np+Mr+wJdrtel7v3+2DMWqIGuGkG7SNsnaKtZ7McFIrc2F+z+UKAUXVfM/lDg/zr8Rc3tDwUefn9I8PDrQ4Jn9q35C4Ev35B0ZZBdAAAAAElFTkSuQmCC';
            var data = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    },
                    // position: function(point, params, dom, rect, size) {
                    //  console.log(point, params, dom, rect, size);
                    //  //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
                    //  var x = point[0]; //
                    //  var y = point[1];
                    //  var viewWidth = size.viewSize[0];
                    //  var viewHeight = size.viewSize[1];
                    //  var boxWidth = size.contentSize[0];
                    //  var boxHeight = size.contentSize[1];
                    //  var posX = 0; //x坐标位置
                    //  var posY = 0; //y坐标位置

                    //  if (x < boxWidth) { //左边放不开
                    //      posX = 5;
                    //  } else { //左边放的下
                    //      posX = x - boxWidth;
                    //  }

                    //  if (y < boxHeight) { //上边放不开
                    //      posY = 5;
                    //  } else { //上边放得下
                    //      posY = y - boxHeight;
                    //  }

                    //  return [posX, posY];

                    // },
                    // formatter: function(v) {
                    //  console.log(v[0])
                    //  return that.dataIndex == v.dataIndex ? v.value : '';
                    // }
                    formatter: '{c}'
                },
                notMerge: true,
                grid: {
                    left: '5%',
                    right: '8%',
                    bottom: '1%',
                    top: '8%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13'],
                    axisTick: { //轴刻度线
                        show: false
                    },

                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: 'rgba(163, 134, 123, 1)'
                        }
                    },
                    axisLine: {
                        show: false,
                        textStyle: {
                            color: 'rgba(179, 157, 162, 1)'
                        }
                    },
                }],
                yAxis: [{
                    type: 'value',
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: 'rgba(163, 134, 123, 1)'
                        }
                    },
                    axisLine: {
                        show: false
                    },
                }],
                series: [{
                    name: '历史数据曲线',
                    type: 'bar',
                    data: [],
                    barWidth: 5,
                    itemStyle: {
                        normal: {
                            label: {
                                show: false,
                                formatter: function(v) {
                                    return that.dataIndex == v.dataIndex ? v.value : '';
                                },
                                position: 'top',
                                distance: 0,
                                color: '#434e79',
                                fontSize: 14,
                                backgroundColor: {
                                    image: icon,
                                },
                                padding: [0, 5, 5, 5],
                                borderRadius: 50
                            }
                        }
                    },
                    markLine: {
                        symbol: "none",
                        data: [{
                            silent: false,
                            lineStyle: {
                                type: "solid",
                                color: "rgba(174, 87, 108, 1)"
                            },
                            yAxis: "65"
                        }]
                    },
                }]
            };
            var data1 = [];
            var data2 = [40, 45, 55, 70, 75, 50, 60, 60, 75, 65, 60, 60, 60]
            for (var i = 0; i < data2.length; i++) {
                if (data2[i] < 65) {
                    data1.push({
                        value: data2[i],
                        itemStyle: {
                            normal: {
                                barBorderRadius: [5, 5, 0, 0],
                                color: 'rgba(158, 69, 89, 1)'
                            }
                        }
                    })
                } else {
                    data1.push({
                        value: data2[i],
                        itemStyle: {
                            normal: {
                                barBorderRadius: [5, 5, 0, 0],
                                color: 'rgba(239, 50, 108, 1)'
                            }
                        }
                    })
                }
            }

            data.series[0].data = data1;
            this.option2 = data;

        },
        methods: {
            
        }
    };
</script>