关于图表插件 Echart的使用

最新推荐文章于 2023-07-22 09:39:31 发布

梦入烟城

最新推荐文章于 2023-07-22 09:39:31 发布

阅读量1.1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/bigbigcao/article/details/93859052

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.什么是Echart?

Echart是一款比较好用的关于数据可视化的前端插件库；支持柱状图，折线图，饼状图，雷达图等… Echart链接地址

my demo如下，如有需要，可以看看下面的内容,嘿嘿
2.1饼状图示例

`html部分`
<div id="main" style="width:400px;height:600px;background-color: pink;"></div>
`js部分`
<script>
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
        tooltip: { //设置提示组件;是否显示内容;
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        backgroundColor: 'pink' //设置全局背景色;
    }
    //数据;
    option.series = [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            data:[
                {value:700, name:'视频广告'},
                {value:274, name:'联盟广告'},
                {value:310, name:'邮件营销'},
                {value:335, name:'直接访问'},
                {value:400, name:'搜索引擎'}
            ],
            //设置系列内字体样式;
            label:{
                show:true,
                position:'outside',
                textStyle:{
                    color:'rgba(0,0,0,0.3)'
                }
            },

            //映射明暗度的组件:
            visualMap:{
                show:true,
                min:0,
                max:600,
                inRange:{
                    colorLightness:[0,600]
                }
            },
        }
    ];
    option.itemStyle = {
        //color:'red', //设置图象颜色;
        shadowBlur:100,
        shadowOffsetX:0,
        shadowOffsetY:0,
        shadowColor:'rgba(0,0,0,1)', //red green blue 透明度0->1 透明度降低;
        emphasis:{
          shadowBlur:200,
          shadowColor:'rgba(0,0,0,0.5)'
        },
    };

    //设置文本的样式可以设置全局的,设置全局的文本样式;
    option.textStyle = {
        color:'rgba(0,0,255,0.5)',
    };

    //饼图的话设置视觉引导线设置为浅色;
    option.labelLine = {
        lineStyle: {
            color: 'rgba(0, 0, 0, 0.3)'
        }
    }
    myChart.setOption(option);
</script>

2.2 ajax异步获取数据更新;

`客户端html`
<body>
    <div id="main" style="width:800px;height:300px;background-color: pink;">我是个柱状图</div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
    var myChart = echarts.init($('#main')[0]);
    // 显示标题，图例和空的坐标轴
    myChart.setOption({
        backgroundColor:'white',
        title: {
            text: '森马服装店'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            // name: '销量',
            type: 'bar',
            data: []
        }]
    });

    $.ajax({
        url:'<?php echo './houtai.php';?>',  
        type:'post',
        dataType:'json',
        beforeSend:function(){
            console.log(123);
        },
        success:function(res){
            myChart.setOption({
                xAxis:{
                    data:res.categories
                },
                series:[{
                    name: res.name,
                    data: res.data
                }]
            })

        }
    })
</script>
`服务端   houtai.php`
$return_data = array (
    'categories' =>  array("衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"),
    'data'       =>  array(22, 20, 22, 10, 10, 20),
    'type' =>'bar',
    'name' =>'森马服装店',
);
echo json_encode($return_data);

梦入烟城

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于图表插件 Echart的使用

1.什么是Echart?Echart是一款比较好用的关于数据可视化的前端插件库；支持柱状图，折线图，饼状图，雷达图等… Echart链接地址my demo如下，如有需要，可以看看下面的内容,嘿嘿2.1饼状图示例`html部分`<div id="main" style="width:400px;height:600px;background-color: pink;"&g...
复制链接

扫一扫