echart简单使用

echart.js简单使用

下载echart文件

生成柱状图

    <div id="main" style="width: 600px;height:400px;"></div>          
        <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'), 'dark');   
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '第一个 ECharts 实例'
        },
        tooltip: {},//配置提示信息：
        legend: {
            data:['销量']//图例组件,图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示
        },
        xAxis: {//配置要在 X 轴显示的项:
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},//配置要在 y 轴显示的项:
        series: [{//每个系列通过 type 决定自己的图表类型:
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };
 
    // 使用刚指定的配置项和数据显示图表。这里 option 表示使用 json 数据格式的配置来绘制图表
    myChart.setOption(option);
</script>

动态生成柱状图

<script>
    	function chart(){
    		var myChart = echarts.init(document.getElementById('div2'), 'light');
    		  // 指定图表的配置项和数据
        var option = {
            title: {
            },
            tooltip: {},//配置提示信息：
            legend: {
                //图例组件,图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示
            },
            xAxis: {//配置要在 X 轴显示的项:
                data: [$("#name1").val(),$("#name2").val(),$("#name3").val(),$("#name4").val()]
            },
            yAxis: {},//配置要在 y 轴显示的项:
            series: [{//每个系列通过 type 决定自己的图表类型:
                name: '销量',
                type: 'bar',
                data: [$("#val1").val(), $("#val2").val(), $("#val3").val(), $("#val4").val()]
            }]
        };
                // 使用刚指定的配置项和数据显示图表。这里 option 表示使用 json 数据格式的配置来绘制图表
    myChart.setOption(option);
	}
</script>
<style>
	div{
		width: 500px;
		height: 600px;
		float: left;    		
	}
	button{
		margin-left: 25%;
	}
</style>
</head>
<body>
	<div id="div1">
	name:<input id="name1"/>value:<input id="val1"/><br />
	name:<input id="name2" />value:<input id="val2"/><br />
	name:<input id="name3" />value:<input id="val3"/><br />
	name:<input id="name4" />value:<input id="val4"/><br />
	<button id="but" onclick="chart()">create</button>
	</div>
	<div id="div2">
		
	</div>

饼图

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
 
    myChart.setOption({
        series : [
            {
                name: '访问来源',
                type: 'pie',    // 设置图表类型为饼图
                radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                data:[          // 数据数组，name 为数据项名称，value 为数据项值
                    {value:235, name:'视频广告'},
                    {value:274, name:'联盟广告'},
                    {value:310, name:'邮件营销'},
                    {value:335, name:'直接访问'},
                    {value:400, name:'搜索引擎'}
                ]
            }
        ]
    })
</script>

ps：参考菜鸟教程：https://www.runoob.com/echarts/echarts-tutorial.html
有详细教程，这里只是简单的使用

posted @ 2021-02-02 15:14  username367  阅读(51)  评论(0)    收藏  举报