绘图是数据分析最重要的工作之一，也是探索数据的过程之一。我们平常可能使用excel、spss、stata、matlab，或者echarts、D3等等进行可视化。虽然基于web的可视化是现在的主流趋势，但在分析过程中，利用python探索数据仍然不可或缺。Python有许多可视化库，这里介绍最常用的matplotlib。
Matplotlib API函数都位于matplotlib.pyplot模块中，我们需要引入matplotlib.pyplot包。直接利用函数就可以绘图：
2024年09月19日
绘图是数据分析最重要的工作之一，也是探索数据的过程之一。我们平常可能使用excel、spss、stata、matlab，或者echarts、D3等等进行可视化。虽然基于web的可视化是现在的主流趋势，但在分析过程中，利用python探索数据仍然不可或缺。Python有许多可视化库，这里介绍最常用的matplotlib。
Matplotlib API函数都位于matplotlib.pyplot模块中，我们需要引入matplotlib.pyplot包。直接利用函数就可以绘图：
2024年09月19日
在项目开发中用到echarts有这样的需求，比如要给一个星期的某个一天设置一个高亮色与其他天不同的颜色来区分开，那么我来演示一下如何达到这样的需求，我知道的方法有两种，也可能有其他方法，欢迎来吐槽
也是在官网上看到的，就是直接在data数据的数组上设置颜色，也就是说在数组的某一段需要添加对象值来达到这种效果
2024年09月19日
效果图：
<div id="divChart" :style="{ width: '100%', height: '100%' }"></div>
<script>
export default {
name: "echartDiv",
data() {
return {
option: {
tooltip: {
trigger: "axis",
axisPointer: {
type: "none",
},
formatter: function (params) {//hover到某一柱子时显示单位，例如：“1号商店进货：60个”
return params[0].name + ": " + params[0].value + "个";
},
},
grid: {
width: "85%",
height: "65%",
top: "17%",
left: "12%",
},
xAxis: {
data: ["1号商店进货", "2号商店进货", "3号商店进货", "4号商店进货"],
axisTick: { show: false },
axisLine: {
lineStyle: {
color: "#483D8B",
},
},
axisLabel: {
color: "#483D8B",
interval: 0,//隔几个显示一次，0表示全部显示
fontSize: "12",//x轴字体大小
itemSize: "",
formatter: function (params) {
var newParamsName = ""; // 最终拼接成的字符串
var paramsNameNumber = params.length; // 实际标签的个数
var provideNumber = 4; // 每行能显示的字的个数
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
/**
* 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
*/
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
/** 循环每一行,p表示行 */
for (var p = 0; p < rowNumber; p++) {
var tempStr = ""; //表示每一次截取的字符串
var start = p * provideNumber; // 开始截取的位置
var end = start + provideNumber; // 结束截取的位置
// 此处特殊处理最后一行的索引值
if (p == rowNumber - 1) {
// 最后一次不换行
tempStr = params.substring(start, paramsNameNumber);
} else {
// 每一次拼接字符串并换行
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr; // 最终拼成的字符串
}
} else {
// 将旧标签的值赋给新标签
newParamsName = params;
}
//将最终的字符串返回
return newParamsName;
},
},
axisPointer: {
type: "shadow",
},
},
yAxis: {
name: "单位：个",
type: "value",
//设置Y轴坐标最大、最小值
min: 0,
max: 100,
interval: 20,
axisLabel: {
color: "#483D8B",
},
axisTick: { show: false },
axisLine: {
show: false,
lineStyle: {
color: "#483D8B",
},
},
splitLine: {
show: true,
lineStyle: {
color: "rgba( 72,61,139,0.7)",
type: "dashed",
},
},
},
series: [
{
name: "hill",
type: "pictorialBar",
barCategoryGap: "5%",
symbol:
"path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
//要改成山峰图就改成< symbol: 'path://path://M10 600 Q 95 0 180 600' >
//要改成三角图就改成< symbol: 'triangle' >
itemStyle: {
opacity: 1,
color: {//设置渐变颜色
type: "linear",
//x 和 y 表示起始的坐标，x2 和 y2 表示终点坐标, 所以也就是向下渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "red", // 0% 处的颜色
},
{
offset: 0.3,
color: "rgba(123,104,238, .8)", // 30% 处的颜色
},
{
offset: 1,
color: "rgba(123,104,238, .1)", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
emphasis: {
itemStyle: {
opacity: 1,
},
},
data: [60, 95, 70, 52],
z: 10,
},
{
name: "glyph",
type: "pictorialBar",
barGap: "-100%",//设置图的大小，越大底部重叠的越多
symbolPosition: "end",
symbolSize: 0,
symbolOffset: [0, "100%"],
data: [],
},
],
},
};
},
mounted() {
this.divChart = this.$echarts.init(document.getElementById("divChart"));
this.divChart.setOption(this.option);
},
};
</script>2024年09月19日
创建需要的目录结构及文件
目录：css、font、images、js
文件：index.html
在css目录下创建一个css文件
Index.html文件中编写基本代码
初始化css
我们查看下引入的文件是否正确，在body中检测一下
2024年09月19日
Echarts
在这个官网中有详细教程以及API，很容易入手Echarts，从个人刚学习Echarts图表来看，它的难度在于它有自己的一套属性，这和我们平时用的css是不同的，因而我们需要什么效果就得去遵守它的属性
对柱形图各部分分析:（重点）
2024年09月19日
Excel作为最常用的办公软件之一，有一个很大的亮点就是作图，图表让数据一目了然；Exce本身的图表比如饼、柱、条、组合等模板操作也相对简单。
Echarts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），提供直观，交互丰富，可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
2024年09月19日
想必我们都遇到过这样的需求，通过Echarts官网上我们可以得到一个如下效果的环状图效果，如下所示。
这种效果显示已经很炫酷了，但是产品还是不满意，想要实现一个如下的效果，虽然看上去不怎么样吧！但是产品觉得这个炫酷就炫酷到环状图有一个渐变的效果。