Echarts相关属性

实现一 ：自定义坐标轴 提示信息

option = {
    // 当前列提示信息拼接 ：params.value[1]：当前点的y坐标值
    tooltip: {
        // 触发类型：坐标轴触发
        show: true,
        trigger: "axis",
        backgroundColor: '#FDF5F6',
        borderColor: '#FDF5F6',
        position: [0, -40],
        padding: 0,
        margin: 0,
        textStyle: {
            color: "#F21612"
        },
        hideDelay: 0,
        showDelay: 0,
        alwaysShowContent: false,
        transitionDuration: 0,
        axisPointer: {
            show: false,
            type: 'line',
            axis: 'x',
            snap: true,
            showContent: true,
            label: {
                backgroundColor: '#FDF5F6',
                borderColor: '#FDF5F6',
                borderWidth: 1,
                shadowBlur: 0,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                textStyle: {
                    color: '#fff'
                },
                formatter: function(params, b) {
                    return params.value;
                }
            },
            lineStyle: {
                color: '#a9b2bb',
                width: 1,
                type: 'solid'
            },
        },
        triggerOn: 'click|mousemove',
        // extraCssText: 'width:100%;height:50px;background:#FDF5F6;',
        // trigger: 'axis',
        // backgroundColor: 'rgba(255,255,255,0.9)', // 通过设置rgba调节背景颜色与透明度
        // borderColor: '#C5CCD1',
        // textStyle: {
        //     color: '#8E989E'
        // },
        // hideDelay: '10',
        formatter: '{b0}<div style="position: relative; padding-left: 12px; color:#EB1F10;"><i style="display:block; width:8px;height:8px;border-radius:10px;background:#EB1F10; position:absolute; top: 7px; left:0;"></i>{a0}: {c0}%</div><div style="position: relative; padding-left: 12px; color:#2B67E8;"><i style="display:block; width:8px;height:8px;border-radius:10px;background:#2B67E8; position:absolute; top: 7px; left:0;"></i>{a1}: {c1}%</div>',
        color: '#8E989E',
        borderWidth: '1',
        // formatter: function (params) {
        //     params = params[0];
        //     var date = new Date(params.name);
        //     return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
        // },
        // axisPointer: {
        //     animation: false
        // },
        // extraCssText:'background:rgba(0, 0, 0, 0.5);'
    },
    grid: {
        left:57,//margin-left
        right:10,
        top:24,
        bottom:33
    },
    animation: false,//静态绘制echarts
    xAxis: {
        type: 'category',
        z: 8,
        boundaryGap: false,//边界间隙
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        //x轴样式修改
        axisLine: {
            show: true,  //是否显示坐标轴轴线。
            onZero: false,//设置坐标轴（x、y）不从0开始
            lineStyle: {
                color: "#e5e8ef"//坐标轴颜色
            }
        },
        // x轴字体样式修改
        axisLabel: {
            show: true,
            interval: 1,//每间隔1个一展示【中间空一个位置】展示信息
            margin: 3,
            textStyle: {
                color: '#757E85', //x轴字体颜色
                fontSize: 12
            },
            padding:[3,0,0,0],
            fontFamily: 'DIN-Regular'
        },
        axisTick: {
            show: false
        },
    },
    yAxis: {
        type: 'value',
        scale: false,
        min: -400,//最大值
        max: 400,//最小值
        type: 'value',
        interval:200,//每间隔200个一展示【中间空200个位置】展示y轴信息
        splitNumber:7,//y轴均分
        z: 8,
        axisLabel: {
            inside: true,
            align: 'left',
            padding: [0, 0, 0, -55],
            verticalAlign: 'middle',
            fontFamily: 'DIN-Regular',
            formatter: function (params) {
                return params+'%';
            },
            rich: {
                a: {
                    verticalAlign: 'bottom',
                    padding: [5, 0, 0, 0],
                    lineHeight: 10,
                    fontSize: 10,
                    z: 16
                }
            },
            textStyle: { color: '#757E85', fontSize: 12 }
        },
        //控制横向网格线属性
        splitLine: {
            lineStyle: {
                color: '#E5E9EF',
                type: 'dashed',
                width: 1
            }
        },
        axisLine: { show: false, onZero: false },// 不显示坐标轴轴线
        axisTick: { show: false },//不显示坐标轴刻度
        alwaysShowContent: false
    },
    series: [{
        name: "aaa的值",
        type: 'line',
        smooth: true, //是否平滑显示
        symbol: 'circle',//每个小点点的样式风格
        showSymbol: false,//默认不展示小点点 经过再显示
        showAllSymbol: false,
        z: 10,
        symbolSize: 5,
        data: [320, 332, 301, 334, 30, -30, -320],
        silent: false,
        itemStyle: {
            normal: {
                color: '#F21612',//轨迹线和小点点的颜色
                borderColor:  '#F21612',//小点点的边框颜色
            }
        },
        lineStyle: {
            normal: {
                width: 1, //连线粗细
                color: "#F21612", //轨迹线颜色
            }
        },
        // 阴影区域
        areaStyle: {
            // 渐变颜色 
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(243, 78, 98, 0.8)'
            }, {
                offset: 1,
                color: 'rgba(255, 255, 255, 0)'
            }]),
            // 常规设置
            // normal: {
            //     opacity: 1,//阴影面积 0无 1全
            //     color: "#ddd",
            //     origin: "start"
            // },
        }
    },{
        name: "bbb的值",
        type: 'line',
        smooth: true, //是否平滑显示
        symbol: 'circle',//每个小点点的样式风格
        showSymbol: false,//默认不展示小点点 经过再显示
        showAllSymbol: false,
        z: 10,
        symbolSize: 5,
        data: [222, 111, -333, 234, -30, 100, 110],
        silent: false,
        itemStyle: {
            normal: {
                color: '#A9B2B8',//轨迹线和小点点的颜色
                borderColor:  '#A9B2B8',//小点点的边框颜色
            }
        },
        lineStyle: {
            normal: {
                width: 1, //连线粗细
                color: "#A9B2B8", //轨迹线颜色
            }
        },
        // 阴影区域
        areaStyle: {
            // 渐变颜色 
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(169,178,184, 0.8)'
            }, {
                offset: 1,
                color: 'rgba(255, 255, 255, 0)'
            }]),
            // 常规设置
            // normal: {
            //     opacity: 0,//阴影面积 0无 1全
            //     color: "#ddd",
            //     origin: "start"
            // },
        }
    }]
}

实现二：无坐标轴 提示信息等

option = {
    grid: {
        left:0,
        right:10,
        top:0,
        bottom:0
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLine: {
            show: false, 
        },
        axisLabel: {
            show: false, 
        },
        axisTick: {
            show: false
        },
    },
    yAxis: {
        type: 'value',
        scale: false,
        axisLabel: {
            show: false, 
        },
        splitLine: {
            show: false,
        },
        axisLine: { show: false, onZero: false },
        axisTick: { show: false },
        alwaysShowContent: false
    },
    series: [{
        name: "aaa的值",
        type: 'line',
        smooth: true, //是否平滑显示
        symbol: 'circle',//每个小点点的样式风格
        showSymbol: false,//默认不展示小点点 经过再显示
        showAllSymbol: false,
        z: 10,
        symbolSize: 5,
        data: [320, 332, 301, 334, 30, -30, -320],
        silent: false,
        itemStyle: {
            normal: {
                color: '#F21612',//轨迹线和小点点的颜色
                borderColor:  '#F21612',//小点点的边框颜色
            }
        },
        lineStyle: {
            normal: {
                width: 1, //连线粗细
                color: "#F21612", //轨迹线颜色
            }
        },
        // 阴影区域
        areaStyle: {
            // 渐变颜色 
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(243, 78, 98, 0.8)'
            }, {
                offset: 1,
                color: 'rgba(255, 255, 255, 0)'
            }]),
        }
    }]
}

 

阴影区域 不以x轴为边界 仅在曲线下展示 ：通过origin: "start"属性实现

option ={
    grid: {
        left:0,
        right:10,
        top:0,
        bottom:0
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLine: {
            show: false, 
        },
        axisLabel: {
            show: false, 
        },
        axisTick: {
            show: false
        },
    },
    yAxis: {
        type: 'value',
        // scale: false,
        // axisLabel: {
        //     show: false, 
        // },
        splitLine: {
            show: false,
        },
        axisLine: { show: false, onZero: false },
        // axisTick: { show: false },
        // alwaysShowContent: false
    },
    series: [{
        name: "bbb的值",
        type: 'line',
        smooth: true, //是否平滑显示
        symbol: 'circle',//每个小点点的样式风格
        // showSymbol: false,//默认不展示小点点 经过再显示
        showAllSymbol: false,
        hoverAnimation:false,
        z: 10,
        symbolSize: 5,
        data: [222, 111, -333, 234, -30, 100, 110],
        // silent: false,
        itemStyle: {
            normal: {
                color: '#A9B2B8',//轨迹线和小点点的颜色
                borderColor:  '#A9B2B8',//小点点的边框颜色
            }
        },
        lineStyle: {
            normal: {
                width: 1, //连线粗细
                color: "#A9B2B8", //轨迹线颜色
            }
        },
        // 阴影区域
        areaStyle: {
            // 渐变颜色 
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(169,178,184, 0.8)'
            }, {
                offset: 1,
                color: 'rgba(255, 255, 255, 0)'
            }]),
            origin: "start"
            // 常规设置
            // normal: {
            //     opacity: 0.3,//阴影面积 0无 1全
            //     color: "#ddd",
            //     origin: "start"
            // },
        }
    }]
}

效果对比

静态绘制echarts：animation: false,

Echarts中属性areaStyle折线图线下方区域颜色修改

echarts折线图 鼠标移入不改变小点显示样式：hoverAnimation:false,==》echarts饼图鼠标移入，悬停部分不放大突出

Echart总结【一 坐标轴属性】

Echarts 的grid各个参数的含义

echarts属性的设置（完整大全）

echarts y轴均分问题

echarts属性随手记

echarts的series配置

饼图

Echarts 饼图中间添加文字、title、graphic

根据条件：取消ios端 左滑返回上一页的默认事件：@touchstart.prevent

<template>
  <div :id="id" class="chart" :ref="id" @touchend="remove" @touchstart="start"></div>
</template>
<script>
import echarts from 'echarts'
export default {
  props: {
    // 取消走势图默认事件
    stopPrev: {
      type: Boolean,
      default: false,
    },
  },
  //...
  methods: {
    start(e) {
      if (this.stopPrev) {
        e.preventDefault()
      }
    },
  },
}
</script>

隐藏tip和轴线

<template>
    <div :id="id" class="chart" :ref="id" @touchend="remove" @touchstart.prevent></div>
</template>
methods: {
  // 隐藏tip
  remove(){
    // 鼠标移出 隐藏tip
    this.chart.dispatchAction({
      type: 'hideTip'
    })
    // 鼠标移出 隐藏轴线
    this.chart.dispatchAction({
      type: 'updateAxisPointer',
      currTrigger: 'leave'
    })
  }
},

dispatchAction hideTip 时只隐藏了tooltip的content，没有隐藏axisPointer