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为滚动显示颜色组的颜色

  • 相关阅读:
    Include Native *.so Library in APK With Android Studio
    listview
    随笔2
    const
    关于nginx配置gzip的相关说明
    关于gzip开启后压缩对比及相关性能
    webpack 打包性能优化
    关于pc端挂载移动端页面的问题
    vue-router 中的路径异步获取时导致的to报错问题
    关于cors及文件上传和下载在非开发环境导致的异常问题
  • 原文地址:https://www.cnblogs.com/huanyun/p/14486840.html
Copyright © 2011-2022 走看看