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

  • 相关阅读:
    常用算法解析-动态规划
    转载-通过ApplicationContext 去获取所有的Bean
    什么是crud?
    new 关键字 和 newInstance() 方法的 区别
    Java反射简单使用--第一次细致阅读底层代码
    动态创建管理定时任务-已完成
    springboot mail整合freemark实现动态生成模板
    20190930开始记录每天学习状态,更新至20200125结束
    hibernate的对象/关系映射结果为空,exists查不到值的问题-20190823
    转载-Java中LinkedList的一些方法—addFirst addFirst getFirst geLast removeFirst removeLast
  • 原文地址:https://www.cnblogs.com/huanyun/p/14486840.html
Copyright © 2011-2022 走看看