逍遥阁

echarts画个柱状图

关键词: echarts

echarts画个柱状图

```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo1</title>
<script src="echarts.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:300px;border:1px solid black;"></div>
<script>
var theChart = echarts.init(document.getElementById("main"));
var option = {
    title: {
        text: "成绩表",
        subtext: "副标题",
        x: "center",
        y: 0
    },
    xAxis: {
        data: ["语文", "数学", "英语", "物理", "化学", "生物"]
    },
    yAxis: {},
    series: [
        {
            name: "分数",
            type: "bar",
            data: [60, 80, 75, 93, 82, 77]
        }
    ],
    toolbox: {
        show: true,
        orient: "horizontal",
        right: 0,
        itemSize: 15,
        feature: {
            dataZoom: {
                yAxisIndex: "none"
            },
            restore: {
                show: true,
                onclick: function(){}
            }
        }
    }
};
theChart.setOption(option);
/*
    从dom得到实例(可以重新得到数据)
*/
var otherChart = echarts.getInstanceByDom(document.getElementById("main"));
var option = otherChart.getOption();
console.log(option);
</script>
</body>
</html>
```

admin
2018-11-30 20:09:30
javascript

文章分类

文章标签

文章归档

友情链接

echarts画个柱状图