Echarts，Highcharts，canvas

Echarts

 头部<!-- 引入 echarts.js -->
    <script src="./js/echarts.min.js"></script>   

 bddy中 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
   
            title: {
   
                text: 'ECharts 入门示例',
                link:"http://www.baidu.com",
                target:"blank",
                subtext:"今日访问量",
                sublink:"http://www.baidu.com",
                textAlign:'normal',
               backgroundColor:"red"
                
            },
          
            tooltip: {
   },
            legend: {
   
                data:['销量'],
            
            },
            xAxis: {
   
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
             
            },
            yAxis: {
   },
            series: [{
   
                name: '销量',
                type: 'pie',
                data: [5, 20, 36, 10, 10, 20]
               
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

//通过修改option中的项，改变图片的样式

highCharts

头部引入 <script src="./js/highcharts.js"></script>
body中  <div id="container" style="min-width:400px;height:400px"></div>

    <script>
      var chart = Highcharts.chart('container', {
   
	chart: {
   
		type: 'bar'
    },
    credits:{
   
     enabled: false // 禁用版权信息
},
	title: {
   
		text: '各洲不同时间的人口条形图'
	},
	subtitle: {
   
		text: '数据来源: Wikipedia.org'
	},
	xAxis: {
   
		categories: ['非洲', '美洲', '亚洲', '欧洲', '大洋洲'],
		title: {
   
			text: null
		}
	},
	yAxis: {
   
		min: 0,
		title: {
   
			text: '人口总量 (百万)',
			align: 'high'
		},
		labels: {
   
			overflow: 'justify'
		}
	},
	tooltip: {
   
		valueSuffix: ' 百万'
	},
	plotOptions: {
   
		bar: {
   
			dataLabels: {
   
				enabled: true,
				allowOverlap: true // 允许数据标签重叠
			}
		}
	},
	legend: {
   
		layout: 'vertical',
		align: 'right',
		verticalAlign: 'top',
		x: -40,
		y: 100,
		floating: true,
		borderWidth: 1,
		backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
		shadow: true
	},
	series: [{
   
		name: '1800 年',
		data: [107, 31, 635, 203, 2]
	}, {
   
		name: '1900 年',
		data: [133, 156, 947, 408, 6]
	}, {
   
		name: '2008 年',
		data: [973, 914, 4054, 732, 34]
	}]
});

        </script>

canvas

1. let canvas = document.getElementById(“canvas”).getContext(“2d”)
2. fillStyle填充色
3. strokeStyle 笔触色
4. fliiRect（x,y,w,h) 填充矩形
5. strokeRect（）笔触矩形
6. Rect()路径矩形
7. moveTo（x,y)//起始点，仅使用一次
8. lineTo(x,y)//连接点，可以使用多次
9. lineWidth 线宽
10. beginPAth（）开启一条路径或重置一条路径
11. closePath() 结束路径
12. stroke() 把笔触的内容返回到页面
13. fill（）把填充的内容返回到页面
14. arc (x,y,半径,起始弧度，结束弧度，是否反向画圆)
15. font = ‘italic bold 40px arial’
16. strokeText(文字内容,x,y) 笔触文字
17. fillText() 填充文字
18. cas.shadowOffsetX = 2; 阴影的x轴偏移量
19. shadowOffsetY = 20; 阴影的y轴偏移量
20. shadowColor = ‘yellow’; 阴影颜色
21. shadowBlur = 20; 阴影的模糊程度
22. globalAlpha = 0.5; 透明度