基于echarts的快速开发-xheCharts框架使用说明手册

最新推荐文章于 2023-02-13 22:40:30 发布
置顶 最新推荐文章于 2023-02-13 22:40:30 发布
阅读量198 收藏 1
点赞数 1
分类专栏： 大前端 大数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a370300020/article/details/116157106
版权

 

1.简介

开源地址：https://gitee.com/a370300020/xhe

 

版本迭代：

版本

日期

作者

内容

V1.0

2020-06-20

九曜真人

实现饼图、柱状图、折线图

v2.0

2021-04-26

九曜真人

实现玫瑰图、折柱图、地图、雷达图、漏斗图、仪表盘、圆环图、文字域、交叉表

 

 

 

 

 

 

 

 

 

 

 

 

效果展示：

 

2.引用

<link rel="stylesheet" href="../../plugins/xhe/xhe.css" />
<script src="../../plugins/jquery/jquery-1.11.1.min.js"></script>
<script src="../../plugins/jquery/jquery-ui.min.js"></script>
<script src="../../plugins/echarts/echarts.min.5.0.2.js"></script>
<script src="../../plugins/echarts/echarts-theme.js"></script>
<script src="../../plugins/echarts/map/province/beijing.js"></script>
<script src="../../plugins/xhe/xheModel.js"></script>
<script src="../../plugins/xhe/xheCharts.js"></script>
<script src="../../plugins/xhe/xheList.js"></script>

 

3.枚举

枚举定义

version

V1_0:1.0版本

V2_0:2.0版本

V3_0:3.0版本

type

Label:文字标签

Line:折线图

Pie:饼状图

HBar:横向柱状图

VBar:纵向柱状图

Barline:折柱图

Gauge:仪表盘

Radar:雷达图

Funnel:漏斗图

Map:地图

Table:交叉表

theme

Vintage

dark

westeros

essos

wonderland

walden

chalk

infographic

Macarons

roma

shine

purple

 

4.属性

属性定义默认值

control

组件容器的ID

 

version

组件容器渲染的版本

eCharts.version.V1_0

type

组件容器渲染的样式

null

titleText

主标题文本，支持使用\n换行

 

titleColor

主标题文字的颜色，默认值：#ffffff

FFFFFF

titleStyle

主标题文字字体的风格,normal/italic/oblique，默认值：normal

normal

titleWeight

主标题文字字体的粗细,normal/bold/bolder/lighter，默认值：bold

bold

titleSize

主标题文字的字体大小，默认值：14

14

titleTop

主标题上端的距离,可以是20这样的具体像素值,可以是'20%'这样相对于容器高宽的百分比,也可以是top\middle\bottom，默认值：auto

auto

titleBottom

主标题下端的距离，默认值：auto

auto

titleLeft

主标题左侧的距离,可以是20这样的具体像素值,可以是'20%'这样相对于容器高宽的百分比,也可以是left\center\right，默认值：center

center

titleRight

主标题右侧的距离，默认值：auto

auto

tooltipShow

是否显示提示框组件，默认值：false

false

tooltipTrigger

触发类型:坐标轴触发，默认值：axis

axis

tooltipFormatter

提示框浮层内容格式器:{a}(系列名称),{b}(类目值),{c}(数值) ，默认值：{b}:{c}

{b}:{c}

tooltipPointer

指示器类型,line:直线指示器;shadow:阴影指示器;none:无指示器;cross:十字准星指示器，默认值：shadow

shadow

tooltipPosition

只在trigger为item的时候有效,inside/top/left/right/bottom

inside

legendShow

是否显示图例，默认值：false

false

legendGroup

图例的数据数组

[]

legendValue

图例的取值范围,[min,max]

[0, 100]

legendColor

图例文字的颜色，默认值：#ffffff

FFFFFF

legendSize

图例文字的大小，默认值：14

14

legendTop

图例组件上端的距离,可以是20这样的具体像素值,可以是'20%'这样相对于容器高宽的百分比,也可以是top\middle\bottom 20

20

legendBottom

图例组件下端的距离，默认值：auto

auto

legendLeft

图例组件左侧的距离,可以是20这样的具体像素值,可以是'20%'这样相对于容器高宽的百分比,也可以是left\center\right，默认值：right

right

legendRight

图例组件右侧的距离，默认值：auto

auto

legendOrient

图例列表的布局朝向,horizontal/vertical，默认值：horizontal

horizontal

colorTheme

颜色主题

eCharts.theme[0]

areaOpacity

图形透明度,0/1，0:不绘制该图形

0

top

组件容器上端的距离,可以是20这样的具体像素值,可以是'20%'这样相对于容器高宽的百分比,也可以是top\middle\bottom，默认值：4%

4%

bottom

组件容器下端的距离，默认值：4%

4%

left

组件容器左侧的距离,可以是20这样的具体像素值,可以是'20%'这样相对于容器高宽的百分比,也可以是left\center\right，默认值：4%

4%

right

组件容器右侧的距离，默认值：4%

4%

roam

组件容器是否可以拖拽移动

true

zoom

组件容器的显示比例

1

center

饼图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标

[['50%', '50%']]

radius

饼图的半径,number:直接指定外半径值;string:表示外半径为可视区尺寸(容器高宽中较小一项);Array.<number|string>:第一项是内半径，第二项是外半径

['0%', '65%']

containLabel

组件容器是否包含坐标轴的刻度标签，默认值：true

true

containTick

组件容器是否包含坐标轴的子刻度标签

true

containSplit

组件容器是否包含坐标轴的子刻度

10

axisColor

x轴与y轴的颜色，默认值：#85EAFB

85EAFB

axisSize

x轴与y轴文字的大小，默认值：12

12

axisXInterval

x轴强制设置坐标轴分割间隔,0:强制显示所有标签;1:隔一个标签显示一个标签;2:表示隔两个标签显示一个标签,以此类推，默认值：0

0

axisYInterval

y轴强制设置坐标轴分割间隔,0:强制显示所有标签;1:隔一个标签显示一个标签;2:表示隔两个标签显示一个标签,以此类推，默认值：0

0

axisXInside

x轴刻度标签是否朝内，默认值：false（朝外）

false

axisYInside

y轴刻度标签是否朝内，默认值：false（朝外）

false

axisXRotate

x轴刻度标签旋转的角度,角度从-90度到90度，默认值：0

0

axisYRotate

y轴刻度标签旋转的角度,角度从-90度到90度，默认值：0

0

axisXName

x轴名称

 

axisYName

y轴名称

 

axisXType

x轴类型,value;数值轴;category:类目轴;time:时间轴,log:对数轴，默认值：category

category

axisYType

y轴类型,value;数值轴;category:类目轴;time:时间轴,log:对数轴，默认值：value

value

axisXIndex

x轴Z值，默认值：1

1

axisYIndex

x轴Z值，默认值：1

1

boundaryGap

x轴两边留白策略,类目轴:true/false;非类目轴:[min, max]，默认值：true

true

splitLine

y轴在组件容器区域中的分隔线，默认值：false

false

parallel

x轴刻度标签是否错位显示，默认值：false

false

labelShow

是否显示标签，默认值：false

false

labelPosition

标签的位置,top/left/right/bottom/inside/insideLeft/insideRight/insideTop/insideBottom/insideTopLeft/insideBottomLeft/insideTopRight/insideBottomRight，默认值：top

top

labelLength

饼图视觉引导线,数组的第一项是贴近饼状图的长度,第二项是贴近文字段的长度，默认值：[15, 15]

[15, 15]

labelColor

主标题文字的颜色

FFFFFF

labelStyle

主标题文字字体的风格,normal/italic/oblique

normal

labelWeight

主标题文字字体的粗细,normal/bold/bolder/lighter

normal

labelSize

主标题文字的字体大小

12

labelFormatter

主标题文字的格式

 

emphasisShow

是否显示浮动标签

false

emphasisColor

浮动标签文字的颜色

FFFFFF

emphasisStyle

浮动标签文字字体的风格,normal/italic/oblique

normal

emphasisWeight

浮动标签文字字体的粗细,normal/bold/bolder/lighter

normal

emphasisSize

浮动标签文字的字体大小

12

emphasisPosition

浮动标签的位置,top/left/right/bottom/inside/insideLeft/insideRight/insideTop/insideBottom/insideTopLeft/insideBottomLeft/insideTopRight/insideBottomRight

inside

emphasisFormatter

浮动标签文字的格式

 

borderColor

边框颜色(map)

93EBF8

borderWidth

边框粗细(map)

1

roseType

是否展示玫瑰饼图

false

lineSmooth

是否平滑曲线显示

true

barWidth

柱形图宽度

15

pointerShow

仪表盘指针是否显示

true

anchorShow

仪表盘指针中心点是否显示

false

section

仪表盘的指示区间,[start,end]

[210, -30]

toolboxShow

是否显示切换工具

false

toolboxSaveAs

是否显示保存图片

true

data

json结果

 

 

5.方法

方法定义

load()

加载图形控件

 

6.示例

6.1 饼图

//初始化饼图
var initPie = function () {

    let pie = new xheCharts();

    try {
        pie.options.control = "div_pie";
        pie.options.type = eCharts.type.Pie;
        pie.options.titleText = "";
        pie.options.titleSize = 18;
        pie.options.tooltipShow = true;
        pie.options.tooltipFormatter = "{b}:\n{c}条，占{d}%";
        pie.options.center = [['50%', '50%']];
        pie.options.data = [[
            { value: 200, name: '类型1' },
            { value: 100, name: '类型2' },
            { value: 300, name: '类型3' },
            { value: 250, name: '类型4' }
        ]];

        pie.load();
    } catch (e) {
    }
};

 

6.2 玫瑰图

//初始化饼图
var initRosePie = function () {

    let rosePie = new xheCharts();

    try {
        rosePie.options.control = "div_rosepie";
        rosePie.options.type = eCharts.type.Pie;
        rosePie.options.titleText = "";
        rosePie.options.titleSize = 18;
        rosePie.options.tooltipShow = true;
        rosePie.options.tooltipFormatter = "{b}:\n{c}条，占{d}%";
        rosePie.options.roseType = true;
        rosePie.options.radius = ['0%', '75%'];
        rosePie.options.center = [['50%', '50%']];
        rosePie.options.data = [[
            { value: 200, name: '类型1' },
            { value: 100, name: '类型2' },
            { value: 300, name: '类型3' },
            { value: 250, name: '类型4' },
            { value: 100, name: '类型5' },
            { value: 300, name: '类型6' },
            { value: 250, name: '类型7' }
        ]];
        rosePie.load();
    } catch (e) {
    }
};

 

6.3 柱图(纵向)

//初始化柱图
var initVBar = function () {

    let vBar = new xheCharts();
    try {
        vBar.options.control = "div_vbar";
        vBar.options.type = eCharts.type.VBar;
        vBar.options.titleSize = 18;
        vBar.options.toolboxShow = true;
        vBar.options.top = '20%';
        vBar.options.bottom = '4%';
        vBar.options.left = '2%';
        vBar.options.right = '5%';
        vBar.options.axisYName = "单位:条";
        vBar.options.tooltipShow = true;
        vBar.options.tooltipFormatter = "{b}:<br/>{a0}:{c0}条<br/>{a1}:{c1}条<br/>{a2}:{c2}条";
        vBar.options.legendGroup = new Array('指标1', '指标2', '指标3');
        vBar.options.data = [
            { key: "分类1", value: [30, 20, 25] },
            { key: "分类2", value: [40, 15, 25] },
            { key: "分类3", value: [60, 40, 30] },
            { key: "分类4", value: [35, 30, 40] }
        ];
        vBar.load();
    } catch (e) {
    }
};

 

6.4 柱图(横向)

//初始化柱图
var initHBar = function () {

    let hBar = new xheCharts();

    try {
        hBar.options.control = "div_hbar";
        hBar.options.type = eCharts.type.HBar;
        hBar.options.titleSize = 18;
        hBar.options.top = '10%';
        hBar.options.bottom = '4%';
        hBar.options.left = '2%';
        hBar.options.right = '15%';
        hBar.options.axisYName = "单位:条";
        hBar.options.tooltipShow = true;
        hBar.options.tooltipFormatter = "{b}:{c}条";
        hBar.options.legendGroup = new Array('分类1');
        hBar.options.data = [
            { key: "类型1", value: [30] },
            { key: "类型2", value: [40] },
            { key: "类型3", value: [60] },
            { key: "类型4", value: [35] }
        ];
        hBar.load();
    } catch (e) {
    }
};

 

6.5 折柱图

//初始化折柱图
var initBarline = function () {

    let barline = new xheCharts();

    try {
        barline.options.control = "div_barline";
        barline.options.type = eCharts.type.Barline;
        barline.options.titleSize = 18;
        barline.options.top = '20%';
        barline.options.bottom = '4%';
        barline.options.left = '2%';
        barline.options.right = '4%';
        barline.options.axisYName = "单位:条|单位:个";
        barline.options.tooltipShow = true;
        barline.options.tooltipFormatter = "{b}:{c}条";
        barline.options.legendGroup = new Array('分类1', '分类2', '分类3');
        barline.options.lineSmooth = false;
        barline.options.data = [
            { key: "分类1", value: [30, 20, 25] },
            { key: "分类2", value: [40, 15, 25] },
            { key: "分类3", value: [60, 40, 30] },
            { key: "分类4", value: [35, 30, 40] },
            { key: "分类5", value: [30, 20, 25] },
            { key: "分类6", value: [40, 15, 25] },
            { key: "分类7", value: [60, 40, 30] },
            { key: "分类8", value: [35, 30, 40] }
        ];
        barline.load();
    } catch (e) {
    }
};

 

6.6 折线图

//初始化线图
var initLine = function () {

    let line = new xheCharts();
    try {
        line.options.control = "div_line";
        line.options.type = eCharts.type.Line;
        line.options.titleSize = 18;
        line.options.toolboxShow = true;
        line.options.top = '10%';
        line.options.bottom = '4%';
        line.options.left = '2%';
        line.options.right = '5%';
        line.options.parallel = true;
        line.options.legendGroup = new Array('分类1', '分类2');
        line.options.data = [
            { key: '类型1', value: [1321, 2014] },
            { key: '类型2', value: [1435, 2598] },
            { key: '类型3', value: [1376, 2456] },
            { key: '类型4', value: [976, 2100] },
            { key: '类型5', value: [942, 2231] },
            { key: '类型6', value: [832, 1113] },
            { key: '类型7', value: [931, 2011] }
        ];
        line.load();
    } catch (e) {
    }
};

 

6.7 地图(北京)

//初始化地图
var initMap = function () {

    let map = new xheCharts();

    try {
        map.options.control = "div_map";
        map.options.type = eCharts.type.Map;
        map.options.tooltipShow = true;
        map.options.tooltipFormatter = "{a}:</br>分类1：{b}（万人）</br>分类2：{c}（户）</br>分类3：{d}（人）";
        map.options.top = '4%';
        map.options.legendShow = true;
        map.options.legendTop = '10%';
        map.options.legendLeft = 'right';
        map.options.labelShow = false;
        map.options.labelColor = '4BF316';
        map.options.labelWeight = 'normal';
        map.options.labelSize = 12;
        map.options.emphasisColor = "FFFFFF";
        map.options.data = [
            { name: '东城区', code: 'dc', value: [1, 1, 1] },
            { name: '西城区', code: 'xc', value: [2, 2, 2] },
            { name: '朝阳区', code: 'cy', value: [3, 3, 3] },
            { name: '海淀区', code: 'hd', value: [4, 4, 4] },
            { name: '丰台区', code: 'ft', value: [5, 5, 5] },
            { name: '大兴区', code: 'dx', value: [6, 6, 6] },
            { name: '通州区', code: 'tz', value: [7, 7, 7] },
            { name: '门头沟区', code: 'mtg', value: [8, 8, 8] },
            { name: '石景山区', code: 'sjs', value: [9, 9, 9] },
            { name: '顺义区', code: 'sy', value: [10, 10, 10] },
            { name: '怀柔区', code: 'hr', value: [11, 11, 11] },
            { name: '延庆区', code: 'yq', value: [12, 12, 12] },
            { name: '密云区', code: 'my', value: [13, 13, 13] },
            { name: '平谷区', code: 'pg', value: [14, 14, 14] },
            { name: '房山区', code: 'fs', value: [15, 15, 15] },
            { name: '昌平区', code: 'cp', value: [16, 16, 16] }
        ];
        map.load();
    }
    catch (e) { }
};

 

6.8 雷达图

//初始化雷达图
var initRadar = function () {

    let radar = new xheCharts();

    try {
        radar.options.control = "div_radar";
        radar.options.type = eCharts.type.Radar;
        radar.options.tooltipShow = true;
        radar.options.legendGroup = new Array('分类1', '分类2');
        radar.options.center = [["50%", "50%"]];
        radar.options.radius = ["70%"];
        radar.options.areaOpacity = 0.4;
        radar.options.data = [
            { name: "类型1", value: [80, 30] },
            { name: "类型2", value: [70, 90] },
            { name: "类型3", value: [35, 20] },
            { name: "类型4", value: [56, 90] },
            { name: "类型5", value: [40, 90] },
            { name: "类型6", value: [40, 120] }
        ];
        radar.load();
    }
    catch (e) { }
};

 

6.9 漏斗图

//初始化漏斗图
var initFunnel = function () {

    let funnel = new xheCharts();

    try {
        funnel.options.control = "div_funnel";
        funnel.options.type = eCharts.type.Funnel;
        funnel.options.left = "25%";
        funnel.options.top = "4%";
        funnel.options.bottom = "4%";
        funnel.options.borderWidth = 0;
        funnel.options.tooltipShow = true;
        funnel.options.tooltipTrigger = "item";
        funnel.options.tooltipFormatter = "{a} <br/>{b} : {c}%";
        funnel.options.legendShow = false;
        funnel.options.legendGroup = new Array('类型1', '类型2', '类型3', '类型4', '类型5', '类型6');
        funnel.options.radius = ["50%"];
        funnel.options.labelShow = true;
        funnel.options.labelFormatter = '{c}%';
        funnel.options.emphasisShow = true;
        funnel.options.emphasisFormatter = '{b}实际: {c}%';
        funnel.options.data = [
            { name: "类型1", value: 80 },
            { name: "类型2", value: 70 },
            { name: "类型3", value: 35 },
            { name: "类型4", value: 56 },
            { name: "类型5", value: 40 },
            { name: "类型6", value: 20 }
        ];
        funnel.load();
    }
    catch (e) {

    }
};

 

6.10 仪表盘

//初始化仪表盘
var initGauge = function () {

    let gauge = new xheCharts();

    try {
        gauge.options.control = "div_gauge";
        gauge.options.type = eCharts.type.Gauge;
        gauge.options.tooltipShow = true;
        gauge.options.tooltipTrigger = "item";
        gauge.options.tooltipFormatter = "{a} <br/>{b} : {c}%";
        gauge.options.legendShow = false;
        gauge.options.legendGroup = new Array('类型1');
        gauge.options.radius = ["80%"];
        gauge.options.center = [['50%', '60%']];
        gauge.options.labelShow = true;
        gauge.options.labelSize = 15;
        gauge.options.labelLength = [10, 20];
        gauge.options.labelPosition = 30;
        gauge.options.emphasisShow = true;
        gauge.options.emphasisSize = 20;
        gauge.options.emphasisWeight = "bold";
        gauge.options.data = [
            { name: "类型1", value: 80 }
        ];
        gauge.load();
    }
    catch (e) {

    }
};

 

6.11 环形图

//初始化仪表盘
var initRing = function () {

    let ring = new xheCharts();

    try {
        ring.options.control = "div_ring";
        ring.options.type = eCharts.type.Gauge;
        ring.options.tooltipShow = true;
        ring.options.tooltipTrigger = "item";
        ring.options.tooltipFormatter = "{a} <br/>{b} : {c}%";
        ring.options.legendShow = false;
        ring.options.legendGroup = new Array('类型1');
        ring.options.radius = ["70%"];
        ring.options.center = [['50%', '50%']];
        ring.options.labelShow = true;
        ring.options.labelSize = 15;
        ring.options.labelPosition = -10;
        ring.options.emphasisShow = true;
        ring.options.emphasisSize = 20;
        ring.options.containLabel = false;
        ring.options.containTick = false;
        ring.options.pointerShow = false;
        ring.options.section = [90, -270];
        ring.options.data = [
            { name: "类型1", value: 56 }
        ];
        ring.load();
    }
    catch (e) {

    }
};

 

6.12 文字域

//初始化文字域
var initLabel = function () {

    let label = new xheCharts();

    try {
        label.options.control = "div_label";
        label.options.type = eCharts.type.Label;
        label.options.top = "3.8";
        label.options.left = "2";
        label.options.labelShow = true;
        label.options.labelSize = 15;
        label.options.labelColor = 'FFFFFF';
        label.options.labelStyle = 'normal';
        label.options.labelWeight = 'normal';
        label.options.labelSize = '4';
        label.options.labelFormatter = '姓名:${name}';
        label.options.data = [
            { key: "name", value: 56 }
        ];
        label.load();
    }
    catch (e) {

    }
};

 

6.12 交叉表

//初始化交叉表
var initTable = function () {

    let table = new xheCharts();

    try {
        table.options.control = "div_table";
        table.options.type = eCharts.type.Table;
        table.options.columns = [
            ["AuditName", "", "auto", "", "C", "", true],
            ["qualitytotalcount", "一级分类1$$二级分类1", "auto", "", "I", "", true],
            ["qualitytotalcount", "一级分类1$$二级分类2", "auto", "", "I", "", true],
            ["qualitytotalcount", "一级分类2$$二级分类1", "auto", "", "I", "", true],
            ["qualitytotalcount", "一级分类2$$二级分类2", "auto", "", "I", "", true],
            ["qualitytotalcount", "一级分类3$$二级分类1", "auto", "", "I", "", true],
            ["qualitytotalcount", "一级分类3$$二级分类2", "auto", "", "I", "", true],
            ["qualitytotalcount", "一级分类4$$二级分类1", "auto", "", "I", "", true],
            ["qualitytotalcount", "一级分类4$$二级分类2", "auto", "", "I", "", true]
        ];
        table.options.data = [
            { "": "指标一", "一级分类1$$二级分类1": 0, "一级分类1$$二级分类2": 0, "一级分类2$$二级分类1": 0, "一级分类2$$二级分类2": 2530, "一级分类3$$二级分类1": 0, "一级分类3$$二级分类2": 1542530, "一级分类4$$二级分类1": 0, "一级分类4$$二级分类2": 0 },
            { "": "指标二", "一级分类1$$二级分类1": 0, "一级分类1$$二级分类2": 0, "一级分类2$$二级分类1": 0, "一级分类2$$二级分类2": 2530, "一级分类3$$二级分类1": 0, "一级分类3$$二级分类2": 1542530, "一级分类4$$二级分类1": 0, "一级分类4$$二级分类2": 0 },
            { "": "指标三", "一级分类1$$二级分类1": 0, "一级分类1$$二级分类2": 0, "一级分类2$$二级分类1": 0, "一级分类2$$二级分类2": 2530, "一级分类3$$二级分类1": 0, "一级分类3$$二级分类2": 1542530, "一级分类4$$二级分类1": 0, "一级分类4$$二级分类2": 0 },
            { "": "指标四", "一级分类1$$二级分类1": 0, "一级分类1$$二级分类2": 0, "一级分类2$$二级分类1": 0, "一级分类2$$二级分类2": 2530, "一级分类3$$二级分类1": 0, "一级分类3$$二级分类2": 1542530, "一级分类4$$二级分类1": 0, "一级分类4$$二级分类2": 0 },
            { "": "指标五", "一级分类1$$二级分类1": 0, "一级分类1$$二级分类2": 0, "一级分类2$$二级分类1": 0, "一级分类2$$二级分类2": 2530, "一级分类3$$二级分类1": 0, "一级分类3$$二级分类2": 1542530, "一级分类4$$二级分类1": 0, "一级分类4$$二级分类2": 0 },
            { "": "指标六", "一级分类1$$二级分类1": 0, "一级分类1$$二级分类2": 0, "一级分类2$$二级分类1": 0, "一级分类2$$二级分类2": 2530, "一级分类3$$二级分类1": 0, "一级分类3$$二级分类2": 1542530, "一级分类4$$二级分类1": 0, "一级分类4$$二级分类2": 0 },
            { "": "指标七", "一级分类1$$二级分类1": 0, "一级分类1$$二级分类2": 0, "一级分类2$$二级分类1": 0, "一级分类2$$二级分类2": 2530, "一级分类3$$二级分类1": 0, "一级分类3$$二级分类2": 1542530, "一级分类4$$二级分类1": 0, "一级分类4$$二级分类2": 0 },
            { "": "指标八", "一级分类1$$二级分类1": 0, "一级分类1$$二级分类2": 0, "一级分类2$$二级分类1": 0, "一级分类2$$二级分类2": 2530, "一级分类3$$二级分类1": 0, "一级分类3$$二级分类2": 1542530, "一级分类4$$二级分类1": 0, "一级分类4$$二级分类2": 0 }
        ];
        table.load();
    }
    catch (e) {

    }
};

 

 

九曜真人
关注
专栏目录
Vue学习-Echarts框架使用
Dennis Shaw的博客
06-26 526
ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。 ECharts 遵循 Apache-2.0 开源协议，免费商用。 ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。 ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行
Echarts中echarts-auto-tooltip的使用
TRTR666的博客
04-13 1488
######1.Echarts的大屏效果，使用鼠标移入不是很方便，所以就有了自动滚动的tooltip的效果，使用方法很简单，直接创建echarts-auto-tooltip.js引入； echarts-auto-tooltip.js内容如下 (function (global) { global.tools = global.tools || {}; /** * echarts tooltip 自动轮播 * @author liuyishi * @par
ECharts开发手册
05-06
ECharts开发手册
ECharts开发手册.rar
06-17
ECharts开发手册.rar
ECharts开发手册.zip
04-13
echarts开发手册
echarts~echarts-gl 配套版本文件
11-02
- 社区资源：开发者社区（如 GitHub、Stack Overflow）上有许多关于 ECharts 和 ECharts-GL 的讨论和解决方案，可以帮助解决实际开发中的问题。 通过深入理解和熟练掌握 ECharts 与 ECharts-GL，开发者可以创建出...
echarts-src-4.8.0 源码以及 echarts-doc-4.8文档二合一文档包，方便大家进行开发
01-25
ECharts 是一个基于 JavaScript 的数据可视化库，广泛应用于前端开发领域。这个压缩包"echarts-src-4.8.0 源码以及 echarts-doc-4.8 文档二合一文档包"提供了 ECharts 4.8.0 版本的完整源代码和详细文档，对于开发者...
apache-echarts-5.0.2-src.zip
07-24
这里我们关注的是 Apache ECharts 的源码版本 "apache-echarts-5.0.2-src.zip"。 首先，`package.json` 文件是 Node.js 项目的核心配置文件，它包含了项目依赖、版本信息、脚本命令等。在 ECharts 的源码中，这个...
Echarts-4.0.4-官方文档-API手册
04-02
ECharts-4.0.4是其4.0.4版本的官方文档和API手册，提供了最新的API介绍，以帮助开发者快速掌握ECharts的使用方法。 1. **echarts.init()函数**：这是创建ECharts实例的函数。它接受三个参数：dom，theme和opts。dom...
ECharts学习笔记
Stephen
07-17 301
在项目开发中，需要图表展示项目数据情况的需求在所难免，Echarts 能满足大多情况的需求，有必要学习下 Echarts 技术。 官网 菜鸟教程 B 站视频
若依框架 --- echarts 封装
02-13 8301
若依框架 echarts 封装
echarts 源码分析 —— 基本框架
weixin_42756155的博客
02-13 4436
一：基本介绍 1、echarts 底层依赖 ZRender，一个轻量级的二维绘制库。 2、echarts 源码可以编译成三个版本，分别为完整版本、常用版本和精简版本，入口是下面三个文件。 3、echarts 的基本使用： /** * 1、基于准备好的 dom，初始化 echarts 实例，参数分别是 dom、theme 和 opts。 * 1)、dom 是 echarts 挂载的容器。 * 2)、theme 是图表主题，可以在 主题下载 - Apache E...
echarts 几种常见的图表的实现及源码
清风九爷的博客
02-15 8360
1、折线图 ECharts // 基于准备好的dom，初始化echarts图表 var myChart = echarts.init(document.getElementById('main')); var option = { title: { text: '未
项目中应用Echarts
致力于成为顶尖的架构师
12-30 2422
首先介绍项目背景：    把如下图所示，把这个做成表格然后打印出来。    点击显示图表出现如图以下的界面： 1、首先导入echarts所需要的js文件，css文件。 将echarts所需要的东西考进来（图上的js文件并不是所有的都需要。） 2、引入以下文件 药品统计 --> 3、js代码： function q
使用ECharts框架实现图形化报表展示
热门推荐
chendaike的博客
07-16 1万+
在这个大数据越来越盛行的年代，越来越多的使用图表的形式来进行数据统计的展示，如折线图、柱状图、散点图、饼图、K线图，盒形图， 地图、热力图、线图等等；如果在以前，要实现这些图表，可能很多人会选择flash。但是flash开发难度大，成本较高，图表多的时候很耗性能。后来越来越多的纯js框架出现，让大家有了更多的选择，比如ECharts、Highcharts以及D3等等。本文将为大家介绍如何使用ECh...
Echarts数据可视化echarts实例的相关操作，开发全解+完美注释
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
12-24 8605
全栈工程师开发手册 （作者：栾鹏） Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解6大公共组件详解（点击进入）： title详解、 tooltip详解、toolbox详解、legend详解、dataZoom详解、visualMap全解 5大坐标系详解（点击进入）： 地理坐标系geo详解、grid直角坐标系（xAxis、yAxis）详解、parallel平行
ECharts框架的基本使用
zqy52199的博客
10-24 2735
1.第一步先下载一个echarts插件， 下载地址：http://echarts.baidu.com/
echarts 框架原理
weixin_45677987的博客
03-04 7698
1： echarts 框架原理： 数据可视化框架原理： 1.1： ECharts 是一个轻量级的 javascript 图形库， 纯 js 实现， mvc 框架，数据驱动。 1.2：Svg 和 Canvas 是两个可以选择的类库之一，其中 svg 交互性更好，性能较弱，不适用于移动端，在绘制数万个点时会崩溃。而 canvas 的渲染速度和性能更好，echarts 在 canvas 上构建一层 MVC层，使得它可以像 svg 一样交互。 1.3：ECharts 的特点：重要性和优先级依次递减...
echarts-for-react 基本使用折线图
最新发布
10-01
Echarts-for-react 是一个 React 组件化封装的 ECharts 库，它使得在 React 中集成 ECharts 的图表变得更加简单。以下是基本使用折线图的步骤： 1. 首先，你需要安装依赖库，通过npm或yarn添加 echarts-for-react ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值