码迷,mamicode.com
首页 > 其他好文 > 详细

Echars讲解分析

时间:2019-10-13 01:10:00      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:数据加载   saveas   ffd   文章   padding   多个   fun   star   ott   

安装与引入

通过 npm 安装 ECharts

通过命令npm install echarts --save安装得到ECharts 和 zrender,存放在 node_modules 目录,直接在项目中运行代码 require(‘echarts‘)得到 Echarts。

var echarts = require('echarts');

// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
    title: { text: 'ECharts 入门示例' },
    tooltip: {},
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});

也可以按需引入

Echarts元素

全局背景

// 全图默认背景
// backgroundColor: 'rgba(0,0,0,0)',

// 默认色板
color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
        '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
        '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
        '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],

title

title: {
    x: 'left',                 // 水平安放位置,默认为左对齐,可选为:
                               // 'center' | 'left' | 'right'
                               // | {number}(x坐标,单位px)
    y: 'top',                  // 垂直安放位置,默认为全图顶端,可选为:
                               // 'top' | 'bottom' | 'center'
                               // | {number}(y坐标,单位px)
    //textAlign: null          // 水平对齐方式,默认根据x设置自动调整
    backgroundColor: 'rgba(0,0,0,0)',
    borderColor: '#ccc',       // 标题边框颜色
    borderWidth: 0,            // 标题边框线宽,单位px,默认为0(无边框)
    padding: 5,                // 标题内边距,单位px,默认各方向内边距为5,
                               // 接受数组分别设定上右下左边距,同css
    itemGap: 10,               // 主副标题纵向间隔,单位px,默认为10,
    textStyle: {
        fontSize: 18,
        fontWeight: 'bolder',
        color: '#333'          // 主标题文字颜色
    },
    subtextStyle: {
        color: '#aaa'          // 副标题文字颜色
    }
}

legend

legend: {
    orient: 'horizontal',      // 布局方式,默认为水平布局,可选为:
                               // 'horizontal' | 'vertical'
    x: 'center',               // 水平安放位置,默认为全图居中,可选为:
                               // 'center' | 'left' | 'right'
                               // | {number}(x坐标,单位px)
    y: 'top',                  // 垂直安放位置,默认为全图顶端,可选为:
                               // 'top' | 'bottom' | 'center'
                               // | {number}(y坐标,单位px)
    backgroundColor: 'rgba(0,0,0,0)',
    borderColor: '#ccc',       // 图例边框颜色
    borderWidth: 0,            // 图例边框线宽,单位px,默认为0(无边框)
    padding: 5,                // 图例内边距,单位px,默认各方向内边距为5,
                               // 接受数组分别设定上右下左边距,同css
    itemGap: 10,               // 各个item之间的间隔,单位px,默认为10,
                               // 横向布局时为水平间隔,纵向布局时为纵向间隔
    itemWidth: 20,             // 图例图形宽度
    itemHeight: 14,            // 图例图形高度
    textStyle: {
        color: '#333'          // 图例文字颜色
    }
}

grid

grid: {
    x: 80,
    y: 60,
    x2: 80,
    y2: 60,
    // width: {totalWidth} - x - x2,
    // height: {totalHeight} - y - y2,
    backgroundColor: 'rgba(0,0,0,0)',
    borderWidth: 1,
    borderColor: '#ccc'
}

dataRange(值域)

dataRange: {
    orient: 'vertical',        // 布局方式,默认为垂直布局,可选为:
                               // 'horizontal' | 'vertical'
    x: 'left',                 // 水平安放位置,默认为全图左对齐,可选为:
                               // 'center' | 'left' | 'right'
                               // | {number}(x坐标,单位px)
    y: 'bottom',               // 垂直安放位置,默认为全图底部,可选为:
                               // 'top' | 'bottom' | 'center'
                               // | {number}(y坐标,单位px)
    backgroundColor: 'rgba(0,0,0,0)',
    borderColor: '#ccc',       // 值域边框颜色
    borderWidth: 0,            // 值域边框线宽,单位px,默认为0(无边框)
    padding: 5,                // 值域内边距,单位px,默认各方向内边距为5,
                               // 接受数组分别设定上右下左边距,同css
    itemGap: 10,               // 各个item之间的间隔,单位px,默认为10,
                               // 横向布局时为水平间隔,纵向布局时为纵向间隔
    itemWidth: 20,             // 值域图形宽度,线性渐变水平布局宽度为该值 * 10
    itemHeight: 14,            // 值域图形高度,线性渐变垂直布局高度为该值 * 10
    splitNumber: 5,            // 分割段数,默认为5,为0时为线性渐变
    color:['#1e90ff','#f0ffff'],//颜色 
    //text:['高','低'],         // 文本,默认为数值文本
    textStyle: {
        color: '#333'          // 值域文字颜色
    }
}

toolbox(工具栏)

toolbox: {
    orient: 'horizontal',      // 布局方式,默认为水平布局,可选为:
                               // 'horizontal' | 'vertical'
    x: 'right',                // 水平安放位置,默认为全图右对齐,可选为:
                               // 'center' | 'left' | 'right'
                               // | {number}(x坐标,单位px)
    y: 'top',                  // 垂直安放位置,默认为全图顶端,可选为:
                               // 'top' | 'bottom' | 'center'
                               // | {number}(y坐标,单位px)
    color : ['#1e90ff','#22bb22','#4b0082','#d2691e'],
    backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景颜色
    borderColor: '#ccc',       // 工具箱边框颜色
    borderWidth: 0,            // 工具箱边框线宽,单位px,默认为0(无边框)
    padding: 5,                // 工具箱内边距,单位px,默认各方向内边距为5,
                               // 接受数组分别设定上右下左边距,同css
    itemGap: 10,               // 各个item之间的间隔,单位px,默认为10,
                               // 横向布局时为水平间隔,纵向布局时为纵向间隔
    itemSize: 16,              // 工具箱图形宽度
    featureImageIcon : {},     // 自定义图片icon
    featureTitle : {
        mark : '辅助线开关',
        markUndo : '删除辅助线',
        markClear : '清空辅助线',
        dataZoom : '区域缩放',
        dataZoomReset : '区域缩放后退',
        dataView : '数据视图',
        lineChart : '折线图切换',
        barChart : '柱形图切换',
        restore : '还原',
        saveAsImage : '保存为图片'
    }
}

tooltip(提示框)

tooltip: {
    trigger: 'item',           // 触发类型,默认数据触发,见下图,可选为:'item' | 'axis'
    showDelay: 20,             // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
    hideDelay: 100,            // 隐藏延迟,单位ms
    transitionDuration : 0.4,  // 动画变换时间,单位s
    backgroundColor: 'rgba(0,0,0,0.7)',     // 提示背景颜色,默认为透明度为0.7的黑色
    borderColor: '#333',       // 提示边框颜色
    borderRadius: 4,           // 提示边框圆角,单位px,默认为4
    borderWidth: 0,            // 提示边框线宽,单位px,默认为0(无边框)
    padding: 5,                // 提示内边距,单位px,默认各方向内边距为5,
                               // 接受数组分别设定上右下左边距,同css
    axisPointer : {            // 坐标轴指示器,坐标轴触发有效
        type : 'line',         // 默认为直线,可选为:'line' | 'shadow'
        lineStyle : {          // 直线指示器样式设置
            color: '#48b',
            width: 2,
            type: 'solid'
        },
        shadowStyle : {                       // 阴影指示器样式设置
            width: 'auto',                   // 阴影大小
            color: 'rgba(150,150,150,0.3)'  // 阴影颜色
        }
    },
    textStyle: {
        color: '#fff'
    }
}

xAxis

xAxis : [
    {
        type : 'category',
        axisLine: {
            symbol: ['none', 'arrow'], //设置x轴或y轴箭头
            lineStyle: {
                color: '#B5B5B5',
                width: 2, //这里是为了突出显示加上的
            }
        },
        //刻度是向内还是向外
        axisTick:{
            inside:true,
            length:1,
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'solid',
                color:'#FCFCFC',//网格颜色
            }
        },
        axisLabel:{ //调整x轴的lable
            //interval:0,  //按x轴的长度显示的刻度的个数    例如:本来显示20个刻度,因为x轴端只显示了10个,
            rotate:0,  //实现x轴的刻度的标识实现旋转,
            textStyle:{
                fontSize:10,// 让字体变大
                color:"#B5B5B5"
            }
        },
        name: "(日期)",
        nameTextStyle: {
            color: "#B5B5B5",
            verticalAlign: "bottom",
            fontSize:'10',
            padding:[35,50,10,-2] //设置x轴的标题的位置
        },
        boundaryGap : false,
        data:['2016-01','2016-07','2016-08','2016-09']
       // data : ['周一','周二','周三','周四','周五','周六','周日']
    }
]

yAxis

yAxis : [
    {
        type : 'VALUE',
        splitNumber:2,//所以将 splitNumber设成3
        axisLine: {
            symbol: ['none', 'arrow'],
            lineStyle: {
                color: '#B5B5B5',
                width: 2, //这里是为了突出显示加上的
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'solid',//
                color:'#FCFCFC'///网格颜色
            }
        },
        //刻度是向内还是向外
        axisTick:{
            inside:true,
            length:1,
        },
        axisLabel:{ //调整x轴的lable
            textStyle:{
                fontSize:10,// 让字体变大
                color:"#B5B5B5"
            }
        },
        name: "(人数)",
        nameLocation:"end",  //实现标题显示的位置
        nameTextStyle:{
            color: "#B5B5B5",
            fontSize:10,
            //                   verticalAlign: 'top',
            //                  align:"left",
            padding:[50,0,-6,0]
        },
        //axisLine : {onZero: false},
      /*  boundaryGap : false,
        axisLabel : {
            formatter: '{value} '
        },
        data:['AA-','AA','AA+']*/

    }
]

类似温湿度的两个y轴可以采用以下代码

yAxis: [    //Y轴(这里我设置了两个Y轴,左右各一个)
    {
        //第一个(左边)Y轴,yAxisIndex为0
        type: 'value',
        name: '温度',
        max: 120,
        min: 0,
        axisLabel: {
            formatter: '{value} ℃'    //控制输出格式
        },
        splitLine: {
            show: false
        }
    },
    {
        //第二个(右边)Y轴,yAxisIndex为1
        type: 'value',
        name: '湿度',
        max: 100,
        min: 0,
        scale: true,
        axisLabel: {
            formatter: '{value} %'
        },
        splitLine: {
            show: false
        }
    }

]

在series属性中插入以下的代码yAxisIndex: ‘1‘即可准确表示。

timeLine(时间轴)

第一种

timeline:{
    axisType :'category',
    orient:'vertical',
    autoPlay :true,
    playInterval :15000,
    right: '5',
    left:'320',
    top:'0',
    bottom:'0',
    label:{
        interval:0,
         formatter: function (item) {
                var str = item.split("-")[1];
                return parseInt(str)+'月';
            }
    },
    data:monthArr,
    currentIndex : index,
    controlStyle:{
        showPlayBtn :false
    }
}

第二种

timeline: {
    show: true,
    axisType: 'category',
    autoPlay: true,
    currentIndex: 5,
    playInterval: 5000,
    symbolSize: 12,
    checkpointStyle: {
        symbol: 'circle',
        symbolSize: 18,
        color: '#00d3e7',
        borderWidth: 2,
        borderColor: "#00d3e7"
    }

dataZoom组件

dataZoom:[ //区域缩放 
{ 
  id: 'dataZoomX', 
  show:true, //是否显示 组件。如果设置为 false,不会显示,但是数据过滤的功能还存在。 
  backgroundColor:"rgba(47,69,84,0)", //组件的背景颜色 
  type: 'slider', //slider表示有滑动块的,inside表示内置的 
  dataBackground:{ //数据阴影的样式。 
    lineStyle:mylineStyle, //阴影的线条样式 
    areaStyle:myareaStyle, //阴影的填充样式 
  }, 
  fillerColor:"rgba(167,183,204,0.4)", //选中范围的填充颜色。 
  borderColor:"#ddd", //边框颜色。 
  filterMode: 'filter', //'filter':当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只要有一个维度在数据窗口外,整个数据项就会被过滤掉。 
          //'weakFilter':当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只有当全部维度都在数据窗口同侧外部,整个数据项才会被过滤掉。 
          //'empty':当前数据窗口外的数据,被 设置为空。即 不会 影响其他轴的数据范围。 
          //'none': 不过滤数据,只改变数轴范围。 
  xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴 
  yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴 
  radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴 
  angleAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴 
  start: 30, //数据窗口范围的起始百分比,表示30% 
  end: 70, //数据窗口范围的结束百分比,表示70% 
  startValue:10, //数据窗口范围的起始数值 
  endValue:100, //数据窗口范围的结束数值。 
  orient:"horizontal", //布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。'horizontal':水平。'vertical':竖直。 
  zoomLock:false, //是否锁定选择区域(或叫做数据窗口)的大小。如果设置为 true 
  则锁定选择区域的大小,也就是说,只能平移,不能缩放。 
  throttle:100, //设置触发视图刷新的频率。单位为毫秒(ms)。 
  zoomOnMouseWheel:true, //如何触发缩放。可选值为:true:表示不按任何功能键,鼠标滚轮能触发缩放。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标滚轮能触发缩放。'ctrl':表示按住 ctrl 和鼠标滚轮能触发缩放。'alt':表示按住 alt 和鼠标滚轮能触发缩放。 
  moveOnMouseMove:true, //如何触发数据窗口平移。true:表示不按任何功能键,鼠标移动能触发数据窗口平移。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl':表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt':表示按住 alt 和鼠标移动能触发数据窗口平移。 
  left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%' 
  top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%' 
  right:"auto", //组件离容器右侧的距离,'20%' 
  bottom:"auto", //组件离容器下侧的距离,'20%' 

}, 
{ 
  id: 'dataZoomY', 
  type: 'inside', 
  filterMode: 'empty', 
  disabled:false, //是否停止组件的功能。 
  xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴 
  yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴 
  radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴 
  angleAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴 
  start: 30, //数据窗口范围的起始百分比,表示30% 
  end: 70, //数据窗口范围的结束百分比,表示70% 
  startValue:10, //数据窗口范围的起始数值 
  endValue:100, //数据窗口范围的结束数值。 
  orient:"horizontal", //布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。'horizontal':水平。'vertical':竖直。 
  zoomLock:false, //是否锁定选择区域(或叫做数据窗口)的大小。如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。 
  throttle:100, //设置触发视图刷新的频率。单位为毫秒(ms)。 
  zoomOnMouseWheel:true, //如何触发缩放。可选值为:true:表示不按任何功能键,鼠标滚轮能触发缩放。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标滚轮能触发缩放。'ctrl':表示按住 ctrl 和鼠标滚轮能触发缩放。'alt':表示按住 alt 和鼠标滚轮能触发缩放。 
  moveOnMouseMove:true, //如何触发数据窗口平移。true:表示不按任何功能键,鼠标移动能触发数据窗口平移。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl':表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt':表示按住 alt 和鼠标移动能触发数据窗口平移。 
} 
]

series

series: [
    {
        name: '温度(℃)',
        type: 'line',    //折线图表示(生成温度曲线)
        symbol: 'emptycircle',    //设置折线图中表示每个坐标点的符号;emptycircle:空心圆;emptyrect:空心矩形;circle:实心圆;emptydiamond:菱形
        stack: 总量,  //写一样会有累加的效果
        areaStyle: {},
        markPoint: {
           data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
           ]
        }//面积的阴影
        data: [110, 20, 56, 36, 96, 58, 25],     //数据值通过Ajax动态获取
    },
    {
        name: '湿度(%)',
        yAxisIndex: '1',    //定位到第二个坐标轴
        type: 'line',
        symbol: 'emptyrect',
        data: [45, 63, 10, 62, 35, 88, 66]
    },]

Echarts 设置

异步数据加载

第一种

var myChart = echarts.init(document.getElementById('main'));

$.get('data.json').done(function (data) {
    myChart.setOption({
        title: {
            text: '异步数据加载示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    });
});

第二种

var myChart = echarts.init(document.getElementById('main'));
// 显示标题,图例和空的坐标轴
myChart.setOption({
    title: {
        text: '异步数据加载示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: []
    }]
});

// 异步加载数据
$.get('data.json').done(function (data) {
    // 填入数据
    myChart.setOption({
        xAxis: {
            data: data.categories
        },
        series: [{
            // 根据名字对应到相应的系列
            name: '销量',
            data: data.data
        }]
    });
});

loading动画

myChart.showLoading();
$.get('data.json').done(function (data) {
    myChart.hideLoading();
    myChart.setOption(...);
});

此文章部分搬运,部分原创,但由于多次修稿,搬运的地址遗失,如有侵权,麻烦联系我的邮箱。

Echars讲解分析

标签:数据加载   saveas   ffd   文章   padding   多个   fun   star   ott   

原文地址:https://www.cnblogs.com/J-Nemo/p/11664481.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!