echarts图表实现

最新推荐文章于 2024-06-10 21:57:03 发布

Dummerd

最新推荐文章于 2024-06-10 21:57:03 发布

阅读量255

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/Dummerd/article/details/128814537

版权

1.打开echarts

点击网址进行下载

引入 Apache ECharts

在刚才保存 echarts.js 的目录新建一个 index.html 文件，内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script> //引入的地址
    <script type="text/javascript">
       书写有关echarts有关代码
     </script> 
  </head>
</html>

打开这个 index.html，你会看到一片空白。但是不要担心，打开控制台确认没有报错信息，就可以进行下一步。

或者

NPM 安装 ECharts

你可以使用如下命令通过 npm 安装 ECharts

npm install echarts --save

引入 ECharts

<template>
  <div id="main" ref="main" style="width: 600px; height: 400px"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "HelloWorld",
  data() {
    return {
      
    };
  },
  mounted() {
	this.draw()
  },
  methods: {
     draw(){  //所有东西在此处配置

		         // 基于准备好的dom，初始化echarts实例 不能删除
		       var myChart = echarts.init(this.$refs.main);
		       // 指定图表的配置项和数据
		       var option = {
		         title: {
		           text: 'ECharts 入门示例',
				   textStyle:{
					   color:'#f00'
				   }
		         },
		         tooltip: { //提示框
					    triggerOn: "none",
					     alwaysShowContent: true,
					     position: function(pt) {
					       return [pt[0], 130];
					     }
				 },
                  //color:"#f00", //设置图表颜色
		         legend: { //图例说明
		           data: ['销量'],
				    show :true
		         },
		         xAxis: {
		           data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
				   // position:'top',
				   
		         },
		         yAxis: {},
		         series: [ //系列
		           {
		             name: '销量',
		             type: 'bar',
                  // inverse:true 柱状图翻转
                  // type: 'line',  //折线图
					 // barWidth:17, //柱条的宽度
		             data: [5, 20, 36, 10, 10, 20],
					 // barCategoryGap:"5%" //柱间距离
                   
                    	 itemStyle:{
						 //每个柱子的不同颜色
						 normal:{
							 color:function(params){
								 var colorList = [
									 "#00A3E9",
									  "#ffA100",
									   "#ffc0cb",
									    "#cccccc",
										 "#BBFFAA",
										  "#ca8622",
								 ];
								 return colorList[params.dataIndex]
							 }
						 }
					 }
					 
		           }
		         ],
				 
		       };
		 
		       // 使用刚指定的配置项和数据显示图表。 不能删除
		       myChart.setOption(option);
	 }
  },
};
</script>

<style scoped>

</style>

设置图表重叠

<template>
	<div id="main" ref="main" style="width: 600px; height: 400px"></div>
</template>

<script>
	import * as echarts from "echarts";
	export default {
		name: "HelloWorld",
		data() {
			return {

			};
		},
		mounted() {
			this.draw()
		},
		methods: {
			draw() {
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(this.$refs.main);

				// 指定图表的配置项和数据
				var option = {
					title: {
						text: 'ECharts 入门示例',
						textStyle: {
							color: '#f00'
						}
					},
					tooltip: { //提示框

					},
					legend: { //图例说明
						data: ['销量'],
						show: true
					},
					xAxis: {
						data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],

					},
					yAxis: {},
					series: [ //系列
						{
							name: '销量',
							type: 'bar',
							data: [5, 20, 36, 10, 10, 20],
						},
						{
							name: '销量',
							type: 'line',
							data: [5, 28, 54, 32, 20, 20],
						},
						{
							type: 'pie',
							width:'35%',
							height:'35%',
							left:'center',
							top:'top',
							data: [{
									value: 335,
									name: "Apple",
								},
								{
									value: 310,
									name: "Grapes",
									},
									{
										value: 234,
										name: "Pineapples",
									},
									{
										value: 135,
										name: "oranges",
									}
								],
							}
						],

					};

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

<style scoped>

</style>

散点图