zoukankan      html  css  js  c++  java
  • vue echarts 柱状图 变色 显示

    
    
    echartscustom2(id,title,xdata,ydata){
                var chartDom = document.getElementById(id);
                var myChart = echarts.init(chartDom);
                var option;
                option = {
                    title:{
                        text:title,
                        left:"center"
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                    },
                    xAxis: {
                        type: 'value',
                        axisLabel:{show:false}
                    },
                    yAxis: {
                        type: 'category',
                        data: ydata,
                        axisLabel:{show:false}
                    },
                    series: [{
                        data: xdata,
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    var colorList = ['#5470c6', '#91cc75','#fac858','#ee6666','#73c0de','#3ba272','#fc8452','#9a60b4','#ea7ccc',];
                                    var index=params.dataIndex%colorList.length;
                                    return colorList[index]
                                }
                            }
                        },
                    }],
                };
                option && myChart.setOption(option);

            },
     

    xdata,ydata自造数组,color为滚动显示颜色组的颜色

  • 相关阅读:
    sql对日期操作
    computeroperationcommand
    Convert函数对日期的应用
    编写快速、高效的JavaScript代码
    vim常用操作技巧与配置
    PureFTPd安装配置
    关于PHP代码加密和文本加密
    父页面调用iframe里的js函数相关例程,Iframe之间通讯研究
    常用JavaScript语法100讲
    计算机端口
  • 原文地址:https://www.cnblogs.com/huanyun/p/14486840.html
Copyright © 2011-2022 走看看