extjs4echarts的简单介绍

发布时间：2023-12-08

extjs4echarts的简单介绍

更新：2022-11-15 06:30

本文目录一览：

  1. 用echarts网页为什么总是崩溃
  2. ECharts 数据可视化按照文档做了一个时间轴，怎么把不同类型的图表显示出来？
  3. vue使用Echarts4.X及5.0版本坑
  4. extjs4 charts做柱状图怎么设置柱子宽度
  5. extjs结合echarts，怎么实现数据的搜索功能

用echarts网页为什么总是崩溃

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- Step:1 引入一个模块加载器，如esl.js或者require.js -->
    <script src="./js/esl.js"></script>
</head>
<body>
    <!-- Step:2 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
    <script type="text/javascript">
        // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
        require.config({
            paths: {
                echarts: './build/echarts',
                'echarts/chart/force': './build/echarts'
            }
        });
        // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
        require([
            'echarts',
            'echarts/chart/force'
        ], function(ec) {
            var myChart = ec.init(document.getElementById('main'));
            var option = {
                title: {
                    text: '人物关系：乔布斯',
                    subtext: '数据来自人立方',
                    x: 'right',
                    y: 'bottom'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} : {b}'
                },
                legend: {
                    x: 'left',
                    data: ['家人', '朋友']
                },
                series: [{
                    type: 'force',
                    name: "人物关系",
                    categories: [{
                        name: '人物',
                        itemStyle: {
                            normal: {
                                color: '#ff7f50'
                            }
                        }
                    }, {
                        name: '家人',
                        itemStyle: {
                            normal: {
                                color: '#87cdfa'
                            }
                        }
                    }, {
                        name: '朋友',
                        itemStyle: {
                            normal: {
                                color: '#9acd32'
                            }
                        }
                    }],
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                textStyle: {
                                    color: '#800080'
                                }
                            },
                            nodeStyle: {
                                brushType: 'both',
                                strokeColor: 'rgba(255,215,0,0.4)',
                                lineWidth: 1
                            }
                        }
                    },
                    emphasis: {
                        label: {
                            show: false
                        },
                        nodeStyle: {},
                        linkStyle: {}
                    }
                }],
                minRadius: 15,
                maxRadius: 25,
                density: 0.05,
                attractiveness: 1.2,
                linkSymbol: 'arrow',
                nodes: [{
                    category: 0,
                    name: '乔布斯',
                    value: 10
                }, {
                    category: 1,
                    name: '丽萨-乔布斯',
                    value: 2
                }, {
                    category: 1,
                    name: '保罗-乔布斯',
                    value: 3
                }, {
                    category: 1,
                    name: '克拉拉-乔布斯',
                    value: 3
                }, {
                    category: 1,
                    name: '劳伦-鲍威尔',
                    value: 7
                }, {
                    category: 2,
                    name: '史蒂夫-沃兹尼艾克',
                    value: 5
                }, {
                    category: 2,
                    name: '奥巴马',
                    value: 8
                }, {
                    category: 2,
                    name: '比尔-盖茨',
                    value: 9
                }, {
                    category: 2,
                    name: '乔纳森-艾夫',
                    value: 4
                }, {
                    category: 2,
                    name: '蒂姆-库克',
                    value: 4
                }, {
                    category: 2,
                    name: '龙-韦恩',
                    value: 1
                }],
                links: [{
                    source: 1,
                    target: 0,
                    weight: 1
                }, {
                    source: 2,
                    target: 0,
                    weight: 2
                }, {
                    source: 3,
                    target: 0,
                    weight: 1
                }, {
                    source: 4,
                    target: 0,
                    weight: 2
                }, {
                    source: 5,
                    target: 0,
                    weight: 3
                }, {
                    source: 6,
                    target: 0,
                    weight: 6
                }, {
                    source: 7,
                    target: 0,
                    weight: 6
                }, {
                    source: 8,
                    target: 0,
                    weight: 1
                }, {
                    source: 9,
                    target: 0,
                    weight: 1
                }, {
                    source: 10,
                    target: 0,
                    weight: 1
                }, {
                    source: 3,
                    target: 2,
                    weight: 1
                }, {
                    source: 6,
                    target: 2,
                    weight: 1
                }, {
                    source: 6,
                    target: 3,
                    weight: 1
                }, {
                    source: 6,
                    target: 4,
                    weight: 1
                }, {
                    source: 6,
                    target: 5,
                    weight: 1
                }, {
                    source: 7,
                    target: 6,
                    weight: 6
                }, {
                    source: 7,
                    target: 3,
                    weight: 1
                }, {
                    source: 9,
                    target: 6,
                    weight: 1
                }]
            };
            var ecConfig = require('echarts/config');
            function focus(param) {
                var data = param.data;
                var links = option.series[0].links;
                var nodes = option.series[0].nodes;
                if (data.source !== undefined && data.target !== undefined) { //点击的是边
                    var sourceNode = nodes[data.source];
                    var targetNode = nodes[data.target];
                    console.log("选中了边 " + sourceNode.name + ' - ' + targetNode.name + ' (' + data.weight + ')');
                } else { // 点击的是点
                    console.log("选中了" + data.name + '(' + data.value + ')');
                }
                console.log(param);
            }
            myChart.on(ecConfig.EVENT.CLICK, focus);
            myChart.setOption(option);
        });
    </script>
</body>
</html>

ECharts 数据可视化按照文档做了一个时间轴，怎么把不同类型的图表显示出来？

最近有个朋友问了这样一个关于ECharts图表组件的问题，他想在一个页面内创建多个图表，不知道该如何做。最大的问题可能是受到了require([],function(){})的阻碍吧。 其实require无非就是一个模块化加载借用其回调函数去创建图表对象。 所以只要我们能够将创建多个图表对象的方法进行统一封装形成一个方法放入require()的回调函数内即可。

一个页面内创建多个ECharts图表示例效果图呈现

想要在一个页面创建多个图表对象需要准备如下几个条件，也可以说是注意事项：

  1. 想要创建几个图表对象就需要预先设置多少个图表容器 图表容器作为图表的载体，所以是必须的，且必须指定每一个容器的width和height为非零，否则会产生图表无法呈现的结果。 
    <div id="main" style="height: 400px; width: 500px; float: left; border: 1px solid #ccc; padding: 10px;"></div>
<div id="mainLine" style="height: 400px; width: 500px; float: left; border: 1px solid #ccc; padding: 10px;"></div>
    这里准备了两个容器。
  2. 引入相关的js文件 
    <script src="js/esl.js" charset="utf-8" type="text/javascript"></script>
<script src="js/echarts.js" charset="utf-8" type="text/javascript"></script>
  3. 编写好创建不同图表对象的方法
    1. 创建一个柱状图的函数 
      // 创建ECharts柱状图图表
function DrawColumnEChart(ec) {
    // --- 柱状图 ---
    var myChart = ec.init(document.getElementById('main'));
    // 图表显示提示信息
    myChart.showLoading({
        text: "图表数据正在努力加载..."
    });
    myChart.hideLoading();
    myChart.setOption({
        title: {
            text: "柱状图"
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['stepday.com', 'tuiwosa.com']
        },
        toolbox: {
            show: false
        },
        calculable: true,
        xAxis: [{
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        }],
        yAxis: [{
            type: 'value',
            splitArea: {
                show: true
            }
        }],
        series: [{
            name: 'stepday.com',
            type: 'bar', // 序列展现类型为柱状图
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
        }, {
            name: 'tuiwosa.com',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
        }]
    });
    var ecConfig = require('echarts/config');
    // ECharts图表的click事件监听
    myChart.on("click", function() {
        alert("你点击我了!");
    });
}
    2. 创建折线图的函数 
      // 创建ECharts折线图图表
function DrawLineEChart(ec) {
    // --- 折线图 ---
    var myLineChart = ec.init(document.getElementById('mainLine'));
    // 图表显示提示信息
    myLineChart.showLoading({
        text: "图表数据正在努力加载..."
    });
    myLineChart.hideLoading();
    myLineChart.setOption({
        title: {
            text: "折线图"
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['stepday.com', 'tuiwosa.com']
        },
        toolbox: {
            show: false
        },
        calculable: true,
        xAxis: [{
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        }],
        yAxis: [{
            type: 'value',
            splitArea: {
                show: true
            }
        }],
        series: [{
            name: 'stepday.com',
            type: 'line', // 序列展现类型为折线图
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
        }, {
            name: 'tuiwosa.com',
            type: 'line',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
        }]
    });
    var ecConfig = require('echarts/config');
    // ECharts图表的click事件监听
    myLineChart.on("click", function() {
        alert("你点击我了!");
    });
}
  4. 封装一个统一调用创建不同图表的函数 
    // 将画多个图表的进行函数封装
function DrawCharts(ec) {
    DrawColumnEChart(ec);
    DrawLineEChart(ec);
}
  5. 结合模块加载函数require(requireArr,callbackFunction)创建图表对象 
    require([
    'echarts',
    'echarts/chart/bar', // 按需加载图表关于bar图的部分
    'echarts/chart/line' // 按需加载图表关于线性图的部分
], DrawCharts);
  6. 特别提醒
    1. 创建不同图表对象的时候需要注意方法内部关于init()初始化图表方法的时候其id要与需要状态当前图表容器id保持一致。
  7. 完整示例代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ECharts-基本线性图</title>
    <script src="js/esl.js" charset="utf-8" type="text/javascript"></script>
    <script src="js/echarts.js" charset="utf-8" type="text/javascript"></script>
</head>
<body>
    <div id="main" style="height: 400px; width: 500px; float: left; border: 1px solid #ccc; padding: 10px;"></div>
    <div id="mainLine" style="height: 400px; width: 500px; float: left; border: 1px solid #ccc; padding: 10px;"></div>
    <div style="clear: both;">
        <h3>STEP DAY</h3>
        <p>我们只提供最直接、最具价值的信息，旨在：<a href="" target="_blank"></a></p>
    </div>
    <script type="text/javascript" language="javascript">
        // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
        require([
            'echarts',
            'echarts/chart/bar', // 按需加载图表关于bar图的部分
            'echarts/chart/line' // 按需加载图表关于线性图的部分
        ], DrawCharts);
        // 将画多个图表的进行函数封装
        function DrawCharts(ec) {
            DrawColumnEChart(ec);
            DrawLineEChart(ec);
        }
        // 创建ECharts柱状图图表
        function DrawColumnEChart(ec) {
            // --- 柱状图 ---
            var myChart = ec.init(document.getElementById('main'));
            // 图表显示提示信息
            myChart.showLoading({
                text: "图表数据正在努力加载..."
            });
            myChart.hideLoading();
            myChart.setOption({
                title: {
                    text: "柱状图"
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['stepday.com', 'tuiwosa.com']
                },
                toolbox: {
                    show: false
                },
                calculable: true,
                xAxis: [{
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                }],
                yAxis: [{
                    type: 'value',
                    splitArea: {
                        show: true
                    }
                }],
                series: [{
                    name: 'stepday.com',
                    type: 'bar', // 序列展现类型为柱状图
                    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                }, {
                    name: 'tuiwosa.com',
                    type: 'bar',
                    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                }]
            });
            var ecConfig = require('echarts/config');
            // ECharts图表的click事件监听
            myChart.on("click", function() {
                alert("你点击我了!");
            });
        }
        // 创建ECharts折线图图表
        function DrawLineEChart(ec) {
            // --- 折线图 ---
            var myLineChart = ec.init(document.getElementById('mainLine'));
            // 图表显示提示信息
            myLineChart.showLoading({
                text: "图表数据正在努力加载..."
            });
            myLineChart.hideLoading();
            myLineChart.setOption({
                title: {
                    text: "折线图"
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['stepday.com', 'tuiwosa.com']
                },
                toolbox: {
                    show: false
                },
                calculable: true,
                xAxis: [{
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                }],
                yAxis: [{
                    type: 'value',
                    splitArea: {
                        show: true
                    }
                }],
                series: [{
                    name: 'stepday.com',
                    type: 'line', // 序列展现类型为折线图
                    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                }, {
                    name: 'tuiwosa.com',
                    type: 'line',
                    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                }]
            });
            var ecConfig = require('echarts/config');
            // ECharts图表的click事件监听
            myLineChart.on("click", function() {
                alert("你点击我了!");
            });
        }
    </script>
</body>
</html>

转载
望采纳！

vue使用Echarts4.X及5.0版本坑

之前的项目中一直用的是4.7.0及4.8.0版本的Echarts。引入的方式无非是全局引入和按需引入两种。

main.js中引入

按需引入新建个myecharts.js。 后来，新建了个项目，由于没有装Echarts就重新cnpm install echarts -S。 写页面的时候无论如何柱状图表也出不来。对比了下原来是版本不一样，新项目装上了5.0版本。 研究了半天才找见是版本的问题。怎么解决呢？要不降级，要不改引入方法，因为之前的方法引入不可用了，echarts的源码变了，不再支持“从'echarts/lib/echarts'导入echarts”，改用“import * as echarts from 'echarts/lib/echarts'”。 好了。记录下自己的踩坑之旅。

extjs4 charts做柱状图怎么设置柱子宽度

加样式：

series: [{
    type: 'column',
    axis: 'left',
    highlight: true,
    style: { width: 10 }, // 这里是宽度
    tips: {
        trackMouse: true,
        width: 140,
        height: 28,
        renderer: function(storeItem, item) {
            this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
        }
    },
    label: {
        display: 'insideEnd',
        'text-anchor': 'middle',
        field: 'data',
        renderer: Ext.util.Format.numberRenderer('0'),
        orientation: 'vertical',
        color: '#333'
    },
    xField: 'name',
    yField: 'data'
}]

extjs结合echarts，怎么实现数据的搜索功能

ECharts提供用require作模块化加载入口，使用类似于RequireJS、SeaJS模块化加载JS库使用require()初始化ECharts。 贴链接篇文章式介绍何使用模块化加载ECharts，使用模块化ECharts提供相应初始化。 首先载源码页面引入lib/echarts-plain-map.js（plain-map未压缩版本）。

  1. 引入主文件直接使用init()实例化：
var myChart = echarts.init(document.getElementById('main'));
推荐文章