Echarts 教学渐变柱状图折线图嵌套饼图标签

最新推荐文章于 2024-02-19 15:36:01 发布

zhangxm 0104

最新推荐文章于 2024-02-19 15:36:01 发布

阅读量1.5k

点赞数 1

分类专栏： Echarts

本文链接：https://blog.csdn.net/xmlove93/article/details/78259774

版权

Echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

哈哈最近在用Echarts 做东西顺便研究了一下Echarts 总结了一些比较常用的代码

话不多说直接放代码这是取json的方式生成图表

myChart.showLoading(); // echarts 自带的loading

$.get('123.json', function (obama_budget_2012) {
    myChart.hideLoading(); // 记得关闭echarts 自带的loading

    var option = {
        title: {  //标题
                text: '日交易总额的变化趋势',//标题内容  还有副标题(subtext) 用法一样
                textStyle: { //这是标题的样式属性 
                    fontWeight: 'normal',              //标题颜色  
                    color: '#fff',
                },
                x:'center'//控制标题的所在位置  同样还有y属性 例 y:'20' 下移20个px
            },

查看更多标题的样式属性戳我

        tooltip : {//这是图表的提示框  就是类似hover在图表上以后出现的
            trigger: 'axis',//触发类型 
            axisPointer: {
                type: 'shadow',//鼠标放上去有阴影
                label: {
                    show: true//开启
                }
            }
        },

查看更多提示框的样式属性戳我

        toolbox: {
            show : false,//是否显示
            feature : {
                mark : {show: true},//标记
                dataView : {show: true, readOnly: false},//数据视图
                magicType: {show: true, type: ['line', 'bar']},//图形转换
                restore : {show: true},//刷新图表
                saveAsImage : {show: true}//另存为图片
            }
        },

查看更多提示框的样式属性戳我

        calculable : true,//可否拖拽图表  感觉应该用于手机吧
        legend: {
            data:['Growth', 'Budget 2011', 'Budget 2012'],//图例的数据标题
            itemGap: 5,//图例每项之间的间隔
            right:'200',//图例距离右边多少距离  同样的 上下左右
            textStyle: {  //图例的样式属性
                    fontWeight: 'normal',             
                    color: '#fff',
                },
        },

查看更多图例的样式属性戳我

//      color:['#FFD200','#d0104c'],//这里的是设置图表数据内容的颜色
        grid: {//指整个直角坐标系  就是整个图表  
            top: '12%',
            left: '1%',
            right: '10%',
            containLabel: true//grid区域是否包含坐标轴的刻度标签
        },

查看更多grid的样式属性戳我

        xAxis: [
            {
                type : 'category',//坐标轴类型。
                data : obama_budget_2012.names,//数据  数据 数据  放在这里
                axisLabel: {//坐标轴刻度标签。
                    show: true,//开启
                    textStyle: {//坐标轴刻度标签的样式属性
                        color: '#fff'
                    }
               },
               axisLine:{//坐标轴在 grid 区域中的分隔线。
                    lineStyle:{//分隔线的样式属性
                        color:'rgba(255,255,255,0.5)'
                    }
                }
            }
        ],

查看更多X轴的样式属性戳我

        yAxis: [
            {
                type : 'value',//坐标轴类型。
                name : 'Budget (million USD)',//坐标轴属性名
                axisLabel: {//坐标轴刻度标签的设置
                    formatter: function (a) {//刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
                        a = +a;
                        return isFinite(a)
                            ? echarts.format.addCommas(+a / 1000)
                            : '';
                    },
                    textStyle: {
                                color: '#fff'
                           }
                },
                splitLine:{//坐标轴在 grid 区域中的分隔线。
                    lineStyle:{
                    color:'#534d49',
                    show:'false'
                }
                },
                axisLine:{//坐标轴轴线相关设置。
                    lineStyle:{
                        color:'#fff'
                    }
                }
            }
        ],

查看更多Y轴的样式属性戳我

        dataZoom: [
            {
                show: true,//是否显示
                start: 94,//数据窗口范围的起始百分比0表示0%  94表示94%
                end: 100,//数据窗口范围的结束百分比 同上
                borderColor:'rgba(255,255,255,0.2)',//边框颜色
                fillerColor:'#8a6bbe',//选中范围的填充颜色
                backgroundColor:'#91989F',//背景颜色
                showDetail:false//选中的时候显示详细信息
            },
            {
                type: 'inside',//类型
                start: 94,
                end: 100,
            },
            {
                show: false,
                yAxisIndex: 0,//设置 dataZoom-inside 组件控制的 y轴
                filterMode: 'empty',//选择数据过滤类型  这个需要具体用一下感受一下
                width: 30,
                height: '80%',
                showDataShadow: false,
                left: '93%',
            }
        ],

查看更多可拖动的时间轴的样式属性戳我

        series : [//系列列表(官方定义)   其实就放数据的地方
            {
                name: 'Budget 2011',//名称
                type: 'bar',//类型  折线啊  柱形图啊 饼图啊之类的
                data: obama_budget_2012.budget2011List,//图表里面的数据
                itemStyle:{//不同的type对应不同的样式  详见文档  下面有链接
                    normal:{
                        color:'#FFD200'
                    }
                },
            },
            {
                name: 'Budget 2012',
                type: 'line',
                data: obama_budget_2012.budget2012List,
                areaStyle: {normal:{}},//区域填充样式。如果要折线并且有面积的感觉 就是这个
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,0,0,1,
                            [
                                {offset: 0, color: '#FFD200'},
                                {offset: 1, color: 'rgba(255,255,255,0)'}
                            ]
                        )
                    }
                }
            }  
        ]