Echarts

Posted peiyao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Echarts相关的知识,希望对你有一定的参考价值。

1.使用方法:

  <script src=‘js/echarts.min.js‘></script>

  <div id=‘box‘></div> 

window.onload = function () {   
    var myChart = echarts.init(document.getElementById(‘box‘));
    option = {
        legend: {
            orient: ‘vertical‘,
            x: ‘left‘,
            data:[‘直接访问‘,‘搜索引擎‘]
        },
        series: [
            {
                name:‘访问来源‘,
                type:‘pie‘,
                radius: [‘50%‘, ‘70%‘],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: ‘center‘,
                        color: ‘#ccc‘,
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: ‘30‘,
                            fontWeight: ‘bold‘
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:335, name:‘直接访问‘},
                    {value:1548, name:‘搜索引擎‘}
                ]
            }
        ]
    };
    myChart.setOption(option);
}

2.基本设置:

  (1)ex改变饼图每个块的颜色,分别在data中添加itemStyle对象然后设置color的颜色即可

data:[
     {value:335, name:‘直接访问‘,
          itemStyle: {
               normal: {
                    color: [‘#715790‘],
               }
          }
                    
    },
    {value:1548, name:‘搜索引擎‘,
          itemStyle: {
                normal: {
                     color: [‘#00F4FE‘],
                }
          }
     }
]

 

以上是关于Echarts的主要内容,如果未能解决你的问题,请参考以下文章

新手求助echarts关系图

怎么用java编写echarts代码

Echarts 如何防止内存泄漏

echarts柱状图颜色设置:echarts柱状图如何设置不同颜色?(代码)

echarts怎么把代码移动在hbuilder里面

echarts散点图