学习 echars 4 使用 dataset 设置结果集图表不显示?

这是从官网上copy的事例
1、按需引入

let echarts = require('echarts/lib/echarts');
// 引入柱状图组件
require('echarts/lib/chart/bar');
// 引入提示框和title组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

2、初始化图表

  mounted () { 
        this.drawLine();
  },
  drawLine() {
            // 基于准备好的dom,初始化echarts实例
            let myChart = echarts.init(document.getElementById('myChart'));
            // 绘制图表
            var option =   {
                dataset: {
                    source: [
                        ['score', 'amount', 'product'],
                        [89.3, 58212, 'Matcha Latte'],
                        [57.1, 78254, 'Milk Tea'],
                        [74.4, 41032, 'Cheese Cocoa'],
                        [50.1, 12755, 'Cheese Brownie'],
                        [89.7, 20145, 'Matcha Cocoa'],
                        [68.1, 79146, 'Tea'],
                        [19.6, 91852, 'Orange Juice'],
                        [10.6, 101852, 'Lemon Juice'],
                        [32.7, 20112, 'Walnut Brownie']
                    ]
                },
                xAxis: {},
                yAxis: {type: 'category'},
                series: [
                    {
                        type: 'bar',
                        encode: {
                            // 将 "amount" 列映射到 X 轴。
                            x: 'amount',
                            // 将 "product" 列映射到 Y 轴。
                            y: 'product'
                        }
                    }
                ]
            };

            myChart.setOption(option, true);
        },
 最终的结果
 

clipboard.png

回复
阅读 9.8k
4 个回答

自己又从新看了下文档,我是使用的webpack按需加载,没用引入dataset组件所以不能显示,
require("echarts/lib/component/dataset"); 这么引入后就可以是正常使用了

请问这个问题你解决了吗?

我也遇到了这个问题,原来echarts 是3.x版本的,为使用dataset升级到了4.x,但发现不出图,只显示 X、Y坐标,我的原因是使用webpack单独打包了第三方的包到一个单独的文件

# webpack.config.js

...
new AddAssetHtmlPlugin({
      filepath: require.resolve('../html/vendors/vendor.dll.js'),
      hash: false,
      includeSourcemap: false,
    }),
...

在升级之后并没有去更新这个文件,导致使用的其实还是3.x的echart。

宣传栏