echart调整样式

最新推荐文章于 2024-06-24 14:38:13 发布

景尘

最新推荐文章于 2024-06-24 14:38:13 发布

阅读量2.8k

点赞数

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.csdn.net/lbPro0412/article/details/82708327

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先会在官方案例找到适合自己的案例，然后进行调整成自己想要的样式。

官方案例：

http://echarts.baidu.com/examples/

需要调整的样式是通过配置来实现的：

http://echarts.baidu.com/option.html#title

下面举例子：

app.title = '世界人口总量 - 条形图';

option = {
    title: {
        text: '世界人口总量',
        subtext: '数据来自网络',
        textStyle:{
            color:"yellow"
        }
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['2011年', '2012年'],
        left:"right" ,
        textStyle:{
            color:"yellow"
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        axisLabel:{
            //show:false, //是否展示X轴坐标
            color:"red" //X轴字体颜色
        },
        axisLine: {
            // show: false,//不展示X轴
            lineStyle:{
                color:"yellow" //X轴颜色
            }
         },
      splitLine:{
        //   show:false //x轴对应线
      }
    },
    yAxis: {
        type: 'category',
        data: ['巴西','印尼','美国','印度','中国','世界人口(万)'],
        axisLabel:{
            //show:false, //是否展示X轴坐标
            color:"red" //X轴字体颜色
        }
    },
    series: [
        {
            name: '2011年',
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
        },
        {
            name: '2012年',
            type: 'bar',
            data: [19325, 23438, 31000, 121594, 134141, 681807]
        }
    ]
};