Echarts图表的简单实现

来源：互联网发布：吉他入门软件下载编辑：程序博客网时间：2024/05/21 10:37

Echarts图表的简单实现

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script type="text/javascript" src="js/echarts.min.js"></script></head><body>    <div id="main" style="width: 600px;height: 400px;"></div></body><script type="text/javascript">    //根据给定的dom文档  生成echarts对象    var charts  = echarts.init(document.getElementById("main"));    /*     *     * @type {{title: {text: string}, tooltip: {}, legend: {data: string[]}, xAxis: {data: string[]}, yAxis: {}, series: *[]}}     */    var option = {        title: {            text: 'ECharts'  //标题        },        tooltip: {},        legend: {            data:['销量123','销量']  //显示的项目   要和给定的series里面的显示对象的名称相同        },        xAxis: {            data: ["衬衫1","羊毛衫2","雪纺衫","裤子","高跟鞋","袜子"] //表示x轴设置        },        yAxis: {},        series: [{            name: '销量123',            type: 'bar',            data: [5, 20, 36, 10, 10, 20]        },{            name: '销量',            type: 'pie',            data: [10, 19, 33, 8, 2, 24]        }]    };    charts.setOption(option);</script></html>

0 0