image.png

    带动画

    let myChart = echarts.init(document.getElementById(“fourChart2”));
    /
    横向柱形图的本质是：X轴的type: ‘value’；Y轴的type: ‘category’,仅此而已
    多个数据就配多个series
    /
    _const title = {
    show: true,
    text: ‘场景处置率’,
    textStyle: {
    color: ‘#a9d2ff’,
    fontSize: 16,
    },
    padding: 0,
    top: 35,
    left: 40,
    };
    const tooltip = {
    show: true,
    trigger: ‘item’,
    axisPointer: {
    type: ‘shadow’,
    },
    backgroundColor: ‘rgba(26,52,88,0.8)’,
    formatter: function (param) {
    // console.log(param)
    return ‘‘ + param.name + ‘  ’ + param.value + ‘‘;
    },
    };
    const commonSeries = {
    type: ‘bar’,
    barWidth: ‘30%’,     //柱条的宽度，不设时自适应。
    itemStyle: {
    //定义柱子的样式
    borderRadius: [20, 20, 20, 20], //柱子圆角[上右下左]，也可以统一值。
    // color:’red’ //不写color，每个series取上面定义的全局color，很好的啊
    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
    offset: 0,
    color: ‘#0E2456’
    }, {
    offset: 1,
    color: ‘#31E6ED’
    }]),
    },
    showBackground: true,     //柱子是否带有背景，默认是没有的
    backgroundStyle: {
    //只有showBackground=true，设置backgroundStyle才会有效果
    color: ‘rgba(24,33,66, .9)’, //
    borderRadius: [20, 20, 20, 20],
    },
    };
    let series = [
    { data: [93, 43, 31, 94, 44, 68,40] },
    ];
    series = series.map((item) => ({
    …item,
    …commonSeries,
    }));
    option = {
    title,
    tooltip,
    grid: {
    // top: ‘15%’,
    // right: ‘3%’,
    left: ‘16%’,
    bottom: ‘13%’
    },
    xAxis: {
    type: ‘value’,
    axisLine: {
    show: true,     //显示Y轴
    },
    axisTick: {
    show: false,     //不显示小的刻度线
    },
    splitLine: {
    show: false,     //不显示竖向分割线
    },
    axisLabel: {     //坐标轴刻度标签的相关设置。
    textStyle: {
    color: ‘#a9d2ff’,
    fontStyle: ‘normal’,
    fontFamily: ‘微软雅黑’,
    fontSize: 12,
    },
    // rotate:-50,
    // interval:0, // 横坐标全显示
    },
    },
    yAxis: {
    type: ‘category’,
    axisLine: {
    show: true,     //显示X轴
    },
    axisTick: {
    show: false,     //不显示小的刻度线
    },
    splitLine: {
    show: false,     //不显示横向分割线
    },
    axisLabel: {     //坐标轴刻度标签的相关设置。
    textStyle: {
    color: ‘#a9d2ff’,
    fontStyle: ‘normal’,
    fontFamily: ‘微软雅黑’,
    fontSize: 12,
    },
    // rotate:-50,
    // interval:0, // 横坐标全显示
    },
    data: [ ‘治安’,’政保’,’反恐’,’反偷渡’, ‘出入境’, ‘海上防疫’, ‘反走私’, ],
    },
    series,
    };
    //图表自动轮播高亮显示函数 myChart直接用
    const animation = (delay = 3000) => {
    let currentIndex = -1;
    const length = option.series[0].data.length;
    _setInterval    (() => {
    currentIndex = (currentIndex + 1) % length;
    // 高亮当前图形
    _myChart.dispatchAction({
    type: ‘highlight’,
    seriesIndex: 0,
    dataIndex: currentIndex,
    });
    // 显示 tooltip
    myChart.dispatchAction({
    type: ‘showTip’,
    seriesIndex: 0,
    dataIndex: currentIndex,
    });
    }, delay);
    };
    // animation(1500)
    _myChart.setOption(option);
    $(window).resize(myChart.resize);