Echarts笔记

最新推荐文章于 2023-12-05 22:03:47 发布

dustdawn

最新推荐文章于 2023-12-05 22:03:47 发布

阅读量358

点赞数

分类专栏：笔记文章标签： Echarts

本文链接：https://blog.csdn.net/qq_37808895/article/details/91042802

版权

笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

文章目录

微信小程序引入Echats
JSP引入Echats
- 导入
- 绘制一个简单的图表
折线图属性介绍
仪表图属性介绍

微信小程序引入Echats

下载官方Echats插件

为了兼容小程序 Canvas，我们提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。

首先，下载 GitHub 上的 ecomfe/echarts-for-weixin 项目。

其中，ec-canvas 是我们提供的组件，其他文件是如何使用该组件的示例。

ec-canvas 目录下有一个 echarts.js，默认我们会在每次 echarts-for-weixin 项目发版的时候替换成最新版的 ECharts。如有必要，可以自行从 ECharts 项目中下载最新发布版，或者从官网自定义构建以减小文件大小。

小程序导入

在 pages/index目录下新建index页面并且在 app.json 的 pages 中增加 ‘pages/index’。

index.json 配置如下：

{
“usingComponents”: {
“ec-canvas”: “…/…/ec-canvas/ec-canvas”
}
}

这一配置的作用是，允许我们在 pages/bar/index.wxml 中使用 < ec-canvas> 组件。注意路径的相对位置要写对，如果目录结构和本例相同，就应该像上面这样配置。

index.wxml 中，我们创建了一个 < ec-canvas> 组件，内容如下：

import * as echarts from '../../../utils/ec-canvas/echarts'; //引入echarts.js
<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

其中 ec 是一个我们在 index.js 中定义的对象，它使得图表能够在页面加载后被初始化并设置。index.js 的结构如下：


function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {
    ...
  };
  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
});

修改上面 option 的内容，即可改变图表

动态加载

import * as echarts from '../../../utils/ec-canvas/echarts'; //引入echarts.js
var dataList = [];
Page({
	/**
   * 页面的初始数据
   */
  data: {
    ec: {
      lazyLoad: true // 延迟加载
    },
  }
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.echartsComponnet = this.selectComponent('#mychart');
    this.getData(); //获取数据
  },
  getData: function () {
  	/**
  	 * 此处的操作：
  	 * 获取数据json
  	 */
  	wx.request({
  	  url: url, //仅为示例，并非真实的接口地址
      data: data,
      method: 'POST',
      header: { 'content-type': 'application/x-www-form-urlencoded' },
      success: (res) => {
      	dataList = res.data;
  		this.init_echarts();//初始化图表
      }
	});
  },
  //初始化图表
  init_echarts: function () {
    this.echartsComponnet.init((canvas, width, height) => {
      // 初始化图表
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      Chart.setOption(this.getOption());
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },
  getOption: function () {
    //时间显示范围
    var anchor = [
      { name: weekDate, value: [weekDate, 0] },  // 开始
      { name: nowDate, value: [nowDate, 0] }  // 结束
    ];
    // 指定图表的配置项和数据
    var option = {
    	xAxis: {
	        type: 'category',
	        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	    },
	    yAxis: {
	        type: 'value'
	    },
	    series: [{
	        data: dataList,
	        type: 'line'
	    }]
    }
    return option;
  },
 
})

JSP引入Echats

导入

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

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

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为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 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

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

折线图属性介绍

var option = {
 
        backgroundColor: '#FFF0F5',
 
        title: {
          text: '折线图',
          subtext: '模拟数据',
          x: 'center'
        },
 
        legend: {
          // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
          orient: 'horizontal',
          // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
          x: 'left',
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
          y: 'top',
          //不同折线名，与series属性中各元素的name要对应
          data: ['预期','实际','假设']
        },
 
        //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
        grid: {
            top: '16%',   // 等价于 y: '16%'
            left: '3%', 
            right: '8%',
            bottom: '3%',
            containLabel: true
        },
 
        // 提示框
        tooltip: {
        //坐标轴触发
          trigger: 'axis'
        },
 
        //工具框，可以选择
        toolbox: {
            feature: {
                saveAsImage: {} //下载保存工具
            }
        },
 
        xAxis: {
          name: '周几',
          type: 'category',
          axisLine: {
            lineStyle: {
              // 设置x轴颜色
              color: '#912CEE'
            }
          },
          // 设置X轴数据旋转倾斜
          axisLabel: {
            rotate: 30, // 旋转角度
            interval: 0  //设置X轴数据间隔几个显示一个，为0表示都显示
            },
          // boundaryGap值为false的时候，折线第一个点在y轴上
          //设置不从0开始则改成true
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
 
        yAxis: {
          name: '数值',
          type: 'value',
          min:0, // 设置y轴刻度的最小值
          max:1800,  // 设置y轴刻度的最大值
          splitNumber:9,  // 设置y轴刻度间隔个数
          axisLine: {
            lineStyle: {
              // 设置y轴颜色
              color: '#87CEFA'
            },
		//y轴显示单位
          axisLabel: {
              formatter:'{value}(V)'
            },
        },
 
        series: [
          {
            name: '预期',
            //stack折线图叠加：第二条线的数值=本身的数值+第一条线的数值，
            //第三条的数值=第二条线图上的数值+本身的数值，以此类推.....
            stack:'数据'
        
            data: [820, 932, 301, 1434, 1290, 1330, 1320],
            type: 'line',
            // 设置小圆点消失
            // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
            symbol: 'none',
            symbolSize:1,   //设置拐点大小
            // 设置折线弧度，取值：0-1之间
            smooth: 0.5,
          },
 
          {
            name: '实际',
            data: [620, 732, 941, 834, 1690, 1030, 920],
            type: 'line',
            // 设置折线上圆点大小
            symbolSize:8,
            itemStyle:{
              normal:{
                // 拐点上显示数值
                label : {
                show: true
                },
                borderColor:'red',  // 拐点边框颜色
                lineStyle:{                 
                  width:5,  // 设置线宽
                  type:'dotted'  //'dotted'虚线 'solid'实线
                }
              }
            }
          },
 
          {
            name: '假设',
            data: [120, 232, 541, 134, 290, 130, 120],
            type: 'line',
            // 设置折线上圆点大小
            symbolSize:10,
            // 设置拐点为实心圆
            symbol:'circle',  
            markPoint: {
				data: [{
					type: 'max',
					name: '最大值'
					},
					{
						type: 'min',
						name: '最小值'
					}]
			},
			markLine: {
				data: [{
					type: 'average',
					name: '平均值'
				}]
					},          
            itemStyle: {
              normal: {
                // 拐点上显示数值
                label : {
                  show: true
                },
                lineStyle:{
                  // 使用rgba设置折线透明度为0，可以视觉上隐藏折线
                  color: 'rgba(0,0,0,0)'
                }
              }
            }
          }
        ],
        
        //设置三条折线颜色
        color: ['#00EE00', '#FF9F7F','#FFD700']
      };

仪表图属性介绍

var option = {
            
			//提示框	
		   tooltip : {
		   		/*格式化弹框：
		   			a:series的name属性
		   			b:series的data的name属性
		   			c:series的data的value属性
				*/
		        formatter: "{a} <br/>{b} : {c}"
		    },
		    grid: {
		        left: '3%',
		        right: '5%',
		        top: '0%',
		        bottom: '0%',
		        containLabel: true
		    },
		
		    series: [
		        {
		            name: '电压',
		            type: 'gauge',
		            center: ['20%', '55%'],    // 默认全局居中
		            radius: '35%',
		            min: 300,                          //最大最小值，取整(低压-50)和(高压+50)  四舍五入
		            max: 450,
		            startAngle:180,
		            endAngle:0,
		            //分割段，最小值和最大值之间数整除分割
            		splitNumber:7,
		            radius: '100%',
		            //表图下的显示，这个是格式化显示数据附上单位
		            detail: {
		                formatter:'电压：{value}V',
		                textStyle: { 
		                    fontSize: 14
		                },},
					//value显示数据，name表盘显示文字
		            data: [{value: 0,name: 'V'}],
		            axisLine: { // 坐标轴线
		                lineStyle: { // 属性lineStyle控制线条样式  外圆宽度
		                    width: 5,
		                    color: [
		                    //区分刻度范围的颜色
		                        [0.356, '#87CEFF'],                  //(低压-min)/(max-min)
		                        [0.71, '#71C671'],                   //(高压-min)/(max-min)
		                        [1, '#FF4500']
		                    ]
		
		                },
		                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
		                    fontSize: 20
		                },
		
		            },
		            axisTick: { // 坐标轴小标记
		                length: 7, // 属性length控制线长
		                lineStyle: { // 属性lineStyle控制线条样式
		                    color: 'auto'
		                }
		            },
		            splitLine: { // 分隔线
		                length: 9, // 属性length控制线长
		                lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
		                    color: 'auto'
		                }
		            },
		            pointer: {//指针大小
		                width: 2,
		            },
		            title: {
		                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
		                    fontWeight: 'bolder',
		                    fontSize: 12,
		                    fontStyle: 'italic'
		                }
		            },
		
		
		
		        }
		    ]
		};
```

dustdawn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts笔记

微信小程序引入Echats下载官方Echats插件为了兼容小程序 Canvas，我们提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。首先，下载 GitHub 上的 ecomfe/echarts-for-weixin 项目。其中，ec-canvas 是我们提供的组件，其他文件是如何使用该组件的示例。ec-canvas 目录下有一个 echarts.js，默认我们会在每次 ...
复制链接

扫一扫

专栏目录