代码之家 › 专栏 › 技术社区 › Paras

未使用数据集和维度显示Echarts图例

echarts javascript

0

Paras · 技术社区 · 6 年前

我用的是 Echarts 图书馆。由于某些原因,图例没有出现在这个使用数据集和维度的简单图表中。

// based on prepared DOM, initialize echarts instance
        var myChart = echarts.init(document.getElementById('main'));

        // specify chart configuration item and data
        var option = {
            dataset: [{
                source: [
                    ['Test1', 10],
                    ['Test2', 20]
                ],
                dimensions: ['Category', 'Value']
            },
            {
                source: [
                    ['Test1', 15],
                    ['Test2', 25]
                ],
                dimensions: ['Category', 'Value2']
            }],
            xAxis: [{ type: 'category' }, { type: 'category' }],
            yAxis: [{ position: 'left' }, { position: 'right' }],
            series: [
                {
                    type: 'line',
                    encode: {
                        x: 'Category',
                        y: 'Value'
                    },
                    datasetIndex: 0,
                    yAxisIndex: 0
                },
                {
                    type: 'line',
                    encode: {
                        x: 'Category',
                        y: 'Value2'
                    },
                    datasetIndex: 1,
                    yAxisIndex: 1
                }
            ],
            color: ["#c22e34", "#e7b603", "#0097da", "#2b821e", "#035daa", "#339ca8"]
        };

        // use configuration item and data specified to show chart
        myChart.setOption(option);

<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
</head>
<body>
    <!-- prepare a DOM container with width and height -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>
</html>

1 回复 | 直到 6 年前

1

3

swaroop katta 6 年前

您需要向选项对象添加图例。并为系列对象命名。

 var option = {
        dataset: [{
            source: [
                ['Test1', 10],
                ['Test2', 20]
            ],
            dimensions: ['Category', 'Value']
        },
        {
            source: [
                ['Test1', 15],
                ['Test2', 25]
            ],
            dimensions: ['Category', 'Value2']
        }],
        legend: {}, //need this to show legend
        xAxis: [{ type: 'category' }, { type: 'category' }],
        yAxis: [{ position: 'left' }, { position: 'right' }],
        series: [
            {
                    name: 'legend1', //give a name to series
                type: 'line',
                encode: {
                    x: 'Category',
                    y: 'Value'
                },
                datasetIndex: 0,
                yAxisIndex: 0
            },
            {
                type: 'line',
                name: 'legend2',
                encode: {
                    x: 'Category',
                    y: 'Value2'
                },
                datasetIndex: 1,
                yAxisIndex: 1
            }
        ],
        color: ["#c22e34", "#e7b603", "#0097da", "#2b821e", "#035daa", "#339ca8"]
    };

jsfiddle