zrender

1.npm install -vconsole --save-dev 2.npm install -vconsele-webpack-plugin --save-dev 3.webpack.base.conf.js 'use strict' const path = require('path') const utils = require('./utils') const config = require('../config') const webpack = require('webpack') const vueLoaderConfig = require('./vue-loader.conf') const vConsolePlugin = require('vconsole-webpack-plugin'); // 引入vConstle function resolve(dir) { return path.join(__dirname, '..', dir) } process.env.NODE_ENV = 'production' // process.env.NODE_ENV = 'development' // new webpack.DefinePlugin({ // 'process.env.NODE_ENV': JSON.stringify(

https://blog.csdn.net/monster123321/article/details/54409485 <el-row style="background:#fff;" @mousewheel.prevent> 禁止mousewheel事件 <div id="canvas" :style="style"></div> </el-row> import zrender from 'zrender' import pic from '@/assets/final.jpg' mounted(){ let that = this, img = new Image() img.src = pic img.onload = function () { that.init(img) } }, methods:{ init(img){ this.style = `width:${img.width}px;height:${img.height}px;` this.$nextTick(() => { this.zr = zrender.init(document.getElementById('canvas')) this.group = new zrender.Group() this.zr.add(this.group) this.draw() //如果canvas宽度过长

效果 来源： oschina 链接： https://my.oschina.net/u/4397388/blog/4357565

前言 从昨天开始给项目里添加一些图表对比功能，上一个项目里使用的是Highcharts，本打算继续用Highcharts做的，昨天试了下做出来的效果不太好，主要也是因为看的多了没什么新鲜感了，于是便尝试下百度做的ECharts， 总体效果还是不错的。 先来几张效果图体验下 其中第6张、第七张的效果可以说是在HTML环境下将Canvas发挥到极致，虽然我目前还没接触到HTML5和CSS3，深深感到和社会脱节啊，一直做信息化系统开发，整天跟随业务而变化，有时甚感无聊[随意吐槽下]。 优势 1、颜色对比度和鲜明度明显要比HighCharts要好。也可能是因为我看HighCharts看的多了，有些视觉疲劳了。 2、支持工具栏。 这个可以说是用了这么多前端插件最意外的一个功能，工具栏中支持【查看数据】、【折现图】、【堆叠】、【平铺】、【还原】、【保存为图片】，几种格式互相切换起来确实方便不少，尤其是事业单位的员工用户，闲的没事干可以点来点去。 3、模块化引入和单文件引入。在开发时你可以引用所有echarts开发文件，方便开发和调试。但是项目发布后则可以去除不需要的文件以加快页面响应速度。 4、用ECharts自己的话说就是折、柱、散点、K线20万数据，秒级出图(估计这一点完爆其他控件)。 5、拖拽重新计算，可以让懂数据的、爱好数据的自行进行数据挖掘，重新整合。 缺点 1

之前公司请外包做了一个体温单使用的zrender.js 但是代码比较复杂维护性比较低再加上自己技术也不行 最近闲下来的时候看了一下zrender的官网慢慢的摸索并读了下之前的代码,感觉实际并不难,就自己重新从零开始自己绘制了一个 其中包括了折线,圆点,阴影区域,垂直虚线,鼠标hover事件等众多内容 今天先说说怎么画一个网格 完成效果如下 先把样式基本代码写好 <template> <div> <div id="main"> </div> </div> </template> css <style scoped> #main{ height: 500px; padding: 15px; position: relative; } html,body{ height: 100%; width: 100%; margin: 0; padding: 0; } canvas{ width: 100%; height: 700px; } </style> js <script> import zrender from 'zrender' export default { name: 'HelloWorld', data () { return { //多少个y轴坐标 xLineLen:{ //天数 7天 day:7, //一天多少分段 time:6 }, canavsWidth:0, /