echarts中柱状图折线图的基本配置

时间：2021-04-20 05:59:39

最近项目中有用到echarts展示数据，方便用户以及平台分析，本打算用canvas自己写一个，不过鉴于业务需求以及后续项目用到的频率，还是决定自己学习echarts，echarts相对于highcharts是一个免费的开源框架，调查了一下午写出了符合公司设计的图表数据展示，中间也遇到了一些坑，现在做一个小的总结，首先参考官方文档http://echarts.baidu.com/index.html中的文档下面的教程，我项目中用的是ng+webpack

1  在项目目录下安装   npm install echarts --save

2  可以在对应的用到处引入echarts ，可以根据项目中所用到的模块按需加载 

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
//引入折线图
require('echarts/lib/chart/line');  

此处我只用到了柱状图，以及折线图，

3 做一些参数配置，

先说一些最基本的

var myChart = echarts.init(document.getElementById('recordBar'));
myChart.setOption(options);

>在结构中先定义一个容器ID，定义宽高;

>

var options={
xAxis: {
data: ['10','11','12','13','14','15','16'],
    },
    yAxis: {

 },
    series: [
 {
// name: '销量',  
            type: 'bar',      //类型设定柱状图
            barWidth: 24,     //柱状图宽度
            data:[10,20,30,40,20,30,10],
            itemStyle: {
normal: {
// color:'#fff'     //柱状图颜色tongyi
                    color: function (params) { //单独设置没一个柱状图颜色
                        var colorList = ['rgb(255,255,255)', 'rgb(255,255,255)', 'rgb(255,255,255)',
                            'rgb(255,255,255)', 'rgb(255,255,255)', 'rgb(255,255,255)',
                            '#e1c8a4',];
                        return colorList[params.dataIndex];
                    }
 }
 },
            barGap: '20'          //柱间距    目前不好使
        },
    ]
};

这是必不可少的配置，这样一个最基本的柱状图就出现了，不过会出现X轴，Y轴，以及背景网格，这些在实际开发中多半是不需要的，所以就要去掉X轴，但要保留文本信息，解决方案如下

xAxis: {
data: $scope.oneData.day,
    //splitLine:{show: false},//去除网格线
    show: true,   //去除坐标为false
    //设置x轴坐标颜色
    axisLine: {
lineStyle: {
color: '#45c08a',
        }
 },
    //设置x轴文本颜色
    axisLabel: {
show: true,
        textStyle: {
color: 'rgba(255,255,255,0.7)'                    //x轴文本颜色
        }
 }
},

将x轴坐标设颜色与背景颜色一致隐藏，文本颜色单独设置，y轴不要直接将show：false，将坐标以及信息全去掉，另外就是去背景网格线，

splitLine:{show: false},//去除网格线

柱状图间距是默认的，可以修改barGap：'xxx',既可以为百分比，又可以为具体值，柱状图可以单独设置每一个颜色，如下

itemStyle: {
normal: {
// color:'#fff'     //柱状图颜色tongyi
        color: function (params) { //单独设置没一个柱状图颜色
            var colorList = ['rgb(255,255,255)', 'rgb(255,255,255)', 'rgb(255,255,255)',
                'rgb(255,255,255)', 'rgb(255,255,255)', 'rgb(255,255,255)',
                '#e1c8a4',];
            return colorList[params.dataIndex];
        }
 }
},

我直接放的项目中代码，前六个为白色，最后一个显示橘色，突出今日交易量，如果项目中需要折线图一并显示，只需要在series中添加一个{}，也可以单独将折线图放另外一个容器，

//折线数据
{
name: '交易量',
    type: 'line',
    symbol: 'square',   //将折线原点改为方块
    symbolSize: 6,     //拐点大小
    itemStyle: {
normal: {
color: function (params) { //单独设置每一个折点颜色
                var colorList = ['rgb(255,255,255)', 'rgb(255,255,255)', 'rgb(255,255,255)', 'rgb(255,255,255)', 'rgb(255,255,255)', 'rgb(255,255,255)', '#e1c8a4'];
                return colorList[params.dataIndex];
            },       //折点颜色
            lineStyle: {
color: 'rgba(255,255,255,0.7)',    //折线颜色
            }
 }
 },
    data: $scope.oneData.line
    //data:[40,50,60,70,50,90,80]
},

以上设置一个type类型，以及将拐点从默认的原点改为方块，以及设置方块大小，单独设置每一个折点颜色，也可统一设置一种颜色，以及折线颜色，data用来填充数据的，我是从接口中获得后定义数组展示的

最后一点就是容器怎么适应手机屏幕，如下

//设置容器上下左右间隔
grid: {
// left: '50',
    // right: '10',
    //  bottom: '20',              //left,right,bottom,为容器距离外侧包含块的距离
    // containLabel: true
    x: 0,
    y: 20,
    x2: 0,
    y2: 30              //x,y代表纵坐标的左上角距离容器的大小     ---x2,y2代表横坐标的右下角距离容器的大小
},

 

写的比较清楚，可自测。我的布局是给定了容器宽高，利用flex布局将其容器先居中，容器宽是根据柱宽加一定间距算出来的，

echarts中柱状图折线图的基本配置

这是有一个数据的情况下，左边折线在最低处也是因为在一个容器内

 

标签：

相关文章