可视化数据_将思念可视化-CSDN博客

本文链接：https://blog.csdn.net/qq_46032261/article/details/121664578

本文介绍了Echarts，一个用于创建交互式图表的JavaScript插件，支持PC和移动端，拥有多种图表类型如折线图、柱状图等，还包含工具箱和自定义主题选项。通过简单的步骤展示如何使用和定制Echarts进行数据展示。

摘要由CSDN通过智能技术生成

什么是Echarts？它有什么用处？

是一个JS插件
性能好可流畅运行PC端和移动端设备
兼容主流浏览器
提供很多常用图标如：折线图、柱状图、散点图、饼图还可以自定义
HeightCharts，D3同行
比较符合我们的习惯

基本步骤：

下载并引入echarts.js文件（官网:Apache ECharts）
准备一个有大小的DOM容器
初始化echarts实例对象
指定配置项和数据
将配置项设置给echarts实例对象

常用类型：

bar	柱状图
pie	饼状图百分比
line	线性图 smooth：true 平滑

颜色修改
自带主题：

var echart=echarts.init(document.getElementById("container"),"ldark");

自定义主体：
打开官网点击资源
在这里插入图片描述
点击主题构建工具

选择好主题样式后点击下载主题

然后引入js替换"ldark"就可以了
特殊样式：

渐变

var mycolor =  {
	     type: 'linear',
	     x: 0,
	     y: 0,
	     x2: 0,
	     y2: 1,
	     colorStops: [{
	         offset: 0, color: 'aqua' // 0% 处的颜色
	     }, {
	         offset: 1, color: 'rgba(10, 50, 128, 1)' // 100% 处的颜色
	     }],
	     global: false // 缺省为 false

线的样式

lineStyle{
width：12，
cap:"round",
opacity:0.7
}

工具箱：

toolbox: {
		     show: true,//提示
		     feature: {
		       dataZoom: {//缩放
		         yAxisIndex: 'none'
		       },
		       dataView: { readOnly: false },//数据视图，可编辑
		       magicType: { type: ['line', 'bar'] },//魔法类型
		       restore: {},//重置
		       saveAsImage: {}//保存图片
		     }
		   },