echarts

锅絮不是我

于 2022-08-27 20:01:03 发布

阅读量192

点赞数

文章标签： echarts javascript

本文链接：https://blog.csdn.net/myx20220713/article/details/126561703

版权

这是三个案例，具体想了解的可以去：Apache ECharts

饼状图

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<script src="echarts/dist/echarts.min.js"></script>
	<script src="echarts/i18n/langZH.js"></script>
	</head>
	<body>
		<div id="main"></div>
		<script type="text/javascript">
			var main =document.getElementById("main")
			var myECharts = echarts.init(main, "null", {
			        width: "auto",
			        height: 600
			    })
				//饼状图中不需要链式
				var option ={
					series:[{
						type:'pie',
						data:[{
							value:335,
							name:'直接访问'
						},{
							value:234,
							name:'联盟广告'
						},{
							value:1548,
							name:'搜素引擎'
						}]
					}]
				}
				myECharts.setOption(option)
		</script>
	</body>
</html>

效果图

柱形图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../echarts/echarts/dist/echarts.min.js"></script>
    <script src="../echarts/echarts/i18n/langZH.js"></script>
    <script src="js/shine.js"></script>
</head>
<div id="main"></div>

<body>
    <script>
        var main = document.getElementById("main")
        var myECharts = echarts.init(main, null, {
                width: "auto",
                height: 600
            })
            //设置数据及格式(配置)
        var option = {
            dataset: {
                source: [
                    ['产品', '2015', '2016', '2017'],
                    ['抹茶拿铁', '43.3', '85.8', '93.7'],
                    ['产品', '83.1', '73.4', '55.1'],
                    ['产品', '86.4', '65.2', '82.5'],
                    ['产品', '72.4', '53.9', '39.1'],
                ]
            },
            xAxis: {
                type: 'category',
            },
            yAxis: {},
            series: [{
                type: 'bar'
            }, {
                type: 'bar'
            }, {
                type: 'bar'

            }]
        };
        myECharts.setOption(option)
    </script>

</body>

</html>

效果图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="echarts/dist/echarts.min.js"></script>
		<script src="echarts/i18n/langZH.js"></script>
	</head>
	<body>
		<div id="main"></div>
		<script type="text/javascript">
			var main =document.getElementById("main")
			var myECharts = echarts.init(main, "", {
			        width: "auto",
			        height: 600
			    })
option = {
  legend: {},
  tooltip: {},
  dataset: {
    source: [
      ['product', '2015', '2016', '2017','2022'],
      ['河北', 43.3, 85.8, 93.7,99.2],
      ['北京', 83.1, 73.4, 55.1,68.7],
      ['河南', 86.4, 65.2, 82.5,67.5],
      ['山东', 72.4, 53.9, 39.1,99.9]
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  // Declare several bar series, each will be mapped
  // to a column of dataset.source by default.
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};
myECharts.setOption(option)
		</script>
	</body>
</html>

效果图