echart的使用

最新推荐文章于 2024-08-23 15:43:20 发布

前端小白101

最新推荐文章于 2024-08-23 15:43:20 发布

阅读量418

点赞数

分类专栏： echarts

本文链接：https://blog.csdn.net/qq_41576941/article/details/113057443

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.echart的使用

		// 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据，这些是在echart实例中复制过来的代码
        var option = {
            // title: {
            //     text: '账号资源',
            //     // subtext: '纯属虚构',
            //     left: 'center'
            // },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            // legend: {
            //     orient: 'vertical',
            //     left: 'left',
            //     data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
            // },
            series: [
                {
                    name: '账号资源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '42%'],
                    data: [
                        {value: 199, name: '直接访问',itemStyle: {color: '#50a0ff'}},
                        {value: 50, name: '邮件营销',itemStyle: {color: '#60cb6d'}},
                        {value: 199, name: '联盟广告',itemStyle: {color: '#e96479'}},
                        {value: 50, name: '视频广告',itemStyle: {color: '#f6d202'}},
                        {value: 199, name: '搜索引擎',itemStyle: {color: '#9561e9'}}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

2.改变echart中饼状图的背景色

//用itemStyle: {color: '#50a0ff'}实现改变颜色
data: [
       {value: 199, name: '直接访问',itemStyle: {color: '#50a0ff'}},
        {value: 50, name: '邮件营销',itemStyle: {color: '#60cb6d'}},
        {value: 199, name: '联盟广告',itemStyle: {color: '#e96479'}},
        {value: 50, name: '视频广告',itemStyle: {color: '#f6d202'}},
        {value: 199, name: '搜索引擎',itemStyle: {color: '#9561e9'}}
    ],