精华内容
下载资源
问答
  • echart

    2021-04-13 19:17:15
    echart使用的是H5 的canvas <div id="chartPie"></div> //获取Dom元素,初始化一个echart let myEchart = this.$echarts.init(document.getElementById("chartBar")); //进行配置 let option={ } ...

    使用

    echart使用的是H5 的canvas

     <div id="chartPie"  style="width: 600px;height:400px;"></div>
    
    //获取Dom元素,初始化一个echart
    let myEchart = this.$echarts.init(document.getElementById("chartBar"));
    
    //进行配置
    let option={
    
    }
    
    配置项挂载到echart上
    

    组件

    xAxis(直角坐标系 X 轴)、yAxis(直角坐标系 Y 轴)、grid(直角坐标系底板)、angleAxis(极坐标系角度轴)、radiusAxis(极坐标系半径轴)、polar(极坐标系底板)、geo(地理坐标系)、dataZoom(数据区缩放组件)、visualMap(视觉映射组件)、tooltip(提示框组件)、toolbox(工具栏组件)、series(系列)、…

    我们注意到,其实系列(series)也是一种组件,可以理解为:系列是专门绘制“图”的组件。

    如果有多个同类组件,option中的配置项那么就是个数组。例如这里有三个 X 轴。

    组件的定位

    多数组件和系列,都能够基于 top / right / down / left / width / height 绝对定位。 这种绝对定位的方式,类似于 CSS 的绝对定位(position: absolute)。绝对定位基于的是 echarts 容器 DOM 节点。

    其中,他们每个值都可以是:

    绝对数值(例如 bottom: 54 表示:距离 echarts 容器底边界 54 像素)。
    或者基于 echarts 容器高宽的百分比(例如 right: ‘20%’ 表示:距离 echarts 容器右边界的距离是 echarts 容器宽度的 20%)。

    grid:{
    	left:100,
    	right:"100%",
    }
    
    • 绝对定位
    • 中心半径定位
    • 其他定位

    坐标系

    直角坐标系中,包括有 xAxis(直角坐标系 X 轴)、yAxis(直角坐标系 Y 轴)、grid(直角坐标系底板)三种组件。

    有多个 grid,每个 grid 分别有 xAxis、yAxis,他们使用 xAxisIndex、yAxisIndex、gridIndex 来指定引用关系:

    也可以在一个echarts中画多个图表,这就需要多个底板,再通过索引使用。
    在这里插入图片描述

    样式

    option:{
    }

    option中的配置项

    title 标题

    title: {
    	//左上角,整张图表的标题
        text: 'ECharts 入门示例'
    },
    

    tooltip 提示文本

    tooltip:{}
    //阴影
    itemStyle:
    
    //背景
    backgroundColor:'#2c343c'
    
    //文本
    textStyle:{  color: 'rgba(255, 255, 255, 0.3)'}
    
    //也可以每个系列分别设置,每个系列的文本设置在 label.textStyle。
    
    label: {
        textStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
        }
    }
    
    //饼图的话还要将标签的视觉引导线的颜色设为浅色。
    
    labelLine: {
        lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
        }
    }
    
    }
    

    扇形的颜色也是在 itemStyle 中设置:

    itemStyle: {
        // 设置扇形的颜色
        color: '#c23531',
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
    

    ECharts 中每个扇形颜色的可以通过分别设置 data 下的数据项实现。

    data: [{
        value:400,
        name:'搜索引擎',
        itemStyle: {
            color: '#c23531'
        }
    }, ...]
    

    但是这次因为只有明暗度的变化,所以有一种更快捷的方式是通过 visualMap 组件将数值的大小映射到明暗度。

    visualMap: {
        // 不显示 visualMap 组件,只用于明暗度的映射
        show: false,
        // 映射的最小值为 80
        min: 80,
        // 映射的最大值为 600
        max: 600,
        inRange: {
            // 明暗度的范围是 0 到 1
            colorLightness: [0, 1]
        }
    }
    

    xAxis X轴备注

    xAxis: {
     	data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    

    yAxis y轴备注

    yAxis: {},
    

    series 图表系列

    系列是专门绘制“图”的组件

    series: [
    	{
    		//对应值所代表的含义,柱状图高度对应的数据含义
    	    name: '销量',
    	    //图表类型,这个代表柱状图
    	    type: 'bar',
    	    //数据
    	    data: [5, 20, 36, 10, 10, 20]
    	},
    	{
    	    name: '温度',
    	    type: 'line',
    	    data: [5, 20, 36, 10, 10, 20],
    	    //指定使用哪个坐标系,索引
    	    yAxisIndex: 1,
    
            // 普通样式。
            itemStyle: {
                // 点的颜色。
                color: 'red'
            },
            label: {
                show: true,
                // 标签的文字。
                formatter: 'This is a normal label.'
            },
    
            // 高亮样式。
            emphasis: {
                itemStyle: {
                    // 高亮时点的颜色。
                    color: 'blue'
                },
                label: {
                    show: true,
                    // 高亮时标签的文字。
                    formatter: 'This is a emphasis label.'
                }
            }
    	},
    ]
    

    dataset 数据集,可以映射多个系列的数据

    多个系列的数据集

    legend 旁边的配置

    dataset: {
        source: [
            [121, 'XX', 442, 43.11],
            [663, 'ZZ', 311, 91.14],
            [913, 'ZZ', 312, 92.12],
            ...
        ]
    },
    xAxis: {},
    yAxis: {},
    series: [
        // 数据从 dataset 中取,encode 中的数值是 dataset.source 的维度 index (即第几列)
        {type: 'bar', encode: {x: 1, y: 0}},
        {type: 'bar', encode: {x: 1, y: 2}},
        {type: 'scatter', encode: {x: 1, y: 3}},
        ...
    ]
    
    legend: {
      bottom: "0",
      //data里面的内容和series中的name一样才会显示
      data: ["蒸发量", "平均温度"]
    },
    

    itemStyle 阴影陪孩子

    itemStyle: {
        // 阴影的大小
        shadowBlur: 200,
        // 阴影水平方向上的偏移
        shadowOffsetX: 0,
        // 阴影垂直方向上的偏移
        shadowOffsetY: 0,
        // 阴影颜色
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
    

    itemStyle的emphasis是鼠标 hover 时候的高亮样式。这个示例里是正常的样式下加阴影,但是可能更多的时候是 hover 的时候通过阴影突出。

    itemStyle: {
        emphasis: {
            shadowBlur: 200,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
    }
    

    tooltip 提示文本

    tooltip 提示文本

    tooltip 提示文本

    tooltip 提示文本

    tooltip 提示文本

    tooltip 提示文本

    tooltip 提示文本

    展开全文
  • Echart

    2016-10-26 16:20:40
  • echart主题

    2018-06-19 15:40:22
    echart主题,echart主题,echart主题,echart主题, echart主题
  • Uni Echart

    2020-10-29 13:25:32
    uni 跨平台使用 echart
  • android echart

    2020-12-14 15:38:56
    实现对百度echart的封装,方便原生Android调用。echart 包含 条形图,折线图,饼图,雷达图等。
  • echart插件

    2017-05-31 23:51:19
    echart插件
  • echart source

    2017-04-13 22:36:11
    echart source
  • echart3.8.5

    2018-05-04 10:06:09
    前端图标开发库 echart3.8.5 该包内部包括3.8.5的docs学习文档 和 echart3.8.5.js 和4.0的js可用
  • 东莞中山 Echart地图
  • Echart画图

    2018-11-17 10:42:35
    通过Echart实现画柱状图,是个很好理解的Demo,很容易入手
  • echart中国地图

    2020-10-15 19:04:49
    echart中国地图
  • Echart-JT-P:Echart人物学习
  • echart地图

    2017-12-07 21:01:20
    使用echart官网提供的json和js实现对省市地图的离线绘制
  • echart统计图

    2018-05-14 13:27:04
    关于echart的开发关于echart的开发关于echart的开发关于echart的开发关于echart的开发关于echart的开发关于echart的开发关于echart的开发关于echart的开发关于echart的开发关于echart的开发关于echart的开发关于...
  • bootstrap echart

    2016-07-22 16:50:41
    bootstrap echart spring集成 sigar 监控,半成品
  • Echart图表

    2019-12-17 12:50:29
  • echart3下载

    2017-10-23 11:02:18
    echart3下载,echart3 全部demo,echart3 全部demo,echart3 全部demo
  • EchartDemo

    2016-02-18 14:53:19
    利用Echart在Android端实现柱状图饼图的展示
  • echart美国地图

    2018-10-12 11:54:41
    echart美国地图

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,847
精华内容 3,138
热门标签
关键字:

echart