web端开发-Echarts(一)

网站：https://echarts.baidu.com/echarts2/doc/example.html

1、导入js

页面中引入echarts.js；可以下载js文件后，导入到项目后，在HTML中引入该js文件；

2、开始

index.html

<!DOCTYPE html>

<head>

</head>

<body>

</body>

3、写数据

<script type="text/javascript">
    // 初始化图表标签
    var myChart = echarts.init(document.getElementById('chart'));
    var options={
        //定义一个标题
        title:{
            text:'测试成绩'
        },
        legend:{
            data:['销量']
        },
        //X轴设置
        xAxis:{
            data:['60分','70分','80分','90分','100分']
        },
        yAxis:{
        },
        //name=legend.data的时候才能显示图例
        series:[{
            name:'销量',
            type:'bar',
            data:['12','32','45','21','1']
        }]

    };
    myChart.setOption(options);
</script>

4、异步数据加载

var myChart = echarts.init(document.getElementById('main'));

$.get('data.json').done(function (data) {
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
});

还有一种方法是先设置好别的样式，显示出一个空的直角坐标轴，然后获取并填入数据，操作如下：

var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});

// 异步加载数据
$.get('data.json').done(function (data) {
// 填入数据
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data.data
}]
});
});

manmanlu2006

发布了44 篇原创文章 · 获赞 9 · 访问量 8618

私信关注

web端开发-Echarts(一)

猜你喜欢