echarts在（React，Vue）中的使用总结

文档地址

echarts官网地址https://echarts.baidu.com/（百度的）

npm方法使用echarts

在vue中使用echarts（在官方文档文档——>教程——>5 分钟上手 ECharts）

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

npm install echarts --save

vue中使用

在vue的main.js中引入（vue.prototype（实例化）链接地址）

import echarts from 'echarts'Vue.prototype.$echarts = echarts

实现代码

//templatelate中的代码
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
//created中的代码
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
let userchart = this.$echarts.init(document.getElementById('userchart'))
let zhejiangChart = this.$echarts.init(document.getElementById('zhejiangChart'))// 绘制图表myChart.setOption({title: { text: '彩票种类的月销售排行' },tooltip: {},xAxis: {data: ["5元","10元","15元"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [88, 20, 36]}]
});

效果图：

地图显示区域

需要提前下载好地图的json文件，可以参考香港地图来做，地址

记得这个位置的HK一定要改掉

echarts.registerMap('HK', geoJson);

react中使用

import echarts from 'echarts';

引入之后

    componentDidMount(){// 基于准备好的dom，初始化echarts实例var myChartbar = echarts.init(document.getElementById('echart-info'));this.barEchart(myChartbar )}barEchart=(myChartbar)=>{let barSource = [['高压', 503, 1185.8],['次高压', 8.1, 273.4],['中压', 6.4, 865.2],['阀门', 70, 953.9],['测压器', 40, 953.9],['重点单位', 120, 953.9],]let barData = [{value:'高压',textStyle:textStyle},{value:'次高压',textStyle:textStyle},{value:'中压',textStyle:textStyle},{value:'阀门',textStyle:textStyle},{value:'测压器',textStyle:textStyle},{value:'重点单位',textStyle:textStyle}]myChartbar.setOption({legend: {},     /* 图例组件 */tooltip: {},    /* 图例组件 */dataset: {source: barSource},textStyle:{fontSize:18},grid: {left:40,borderColor:'#1E9ED3',tooltip: {trigger: 'axis',axisPointer: {type: 'shadow',label: {show: true,formatter: function (params) {return params.value.replace('\n', '');}}}}},xAxis: {type:'category',axisLabel:{'interval':0},axisLine:{lineStyle:{color:'#249CF9'}},axisTick:{show:false},data:barData},yAxis: {show:true,axisTick:{show:false},axisLine:{lineStyle:{color:'#249CF9'}},},series: [{type: 'bar',barWidth:'20%',itemStyle:{color:'#249CF9'}},{type: 'bar',barWidth:'20%',itemStyle:{color:'#FDB628'}}]});}

效果图：

问题：如何自定义柱状图Y轴字体(axisLabel)

            yAxis: {show:true,axisTick:{show:false},axisLine:{lineStyle:{color:'#249CF9'}},axisLabel: {textStyle: {color: '#f5f5f5'}}},

如图

自适应宽度

echarts 随着页面的宽度，变化而变化。

 var myChartbar = echarts.init(document.getElementById('Keyunit'));
/* 自动缩放 */
window.addEventListener("resize", function () {myChartbar.resize();
});

echarts在（React，Vue）中的使用总结相关推荐

【Echarts】在Vue中使用Echarts
在Vue中使用Echarts 引入第三方库vue-echarts vue-echarts安装与使用 vue2中使用Echarts vue-echarts安装 vue2中使用Echarts vue3中使 ...
1、【Echarts系列】Vue中设置echarts折线图样式(图表、网格、标签、提示、标题、文字)，手把手教程系列
一.echarts 折线图(折线统计图) 折线图在我们也是我们的数据可视化图表中最常用的一种图表之一,是用折线将各个数据点标志连接起来的图表,不仅可以表示数量的多少,而且可以反映同一事物在不同时间里的 ...
echarts：在vue中使用渐变色
1.线性渐变 1.1.垂直方向的渐变以柱形图为例,如果设置柱子垂直方向渐变,只需要设置x=0,y=1即可,本案例从下往上颜色从蓝色变为红色,如果想要颜色从上往下渐变,改变offset的值即可,比如将 ...
前端js导出Excel库(js-export-excel)在React/Vue中使用参考
目录前言目前有个需求是不通过后端,前端直接导出表格数据.从网上找了一个库,发现很好用 ,所以简单记录下,方便日后查阅 GitHub地址: [https://github.com/cuikangji ...
vue中使用echarts绘制仪表盘
效果图目录一.安装echarts 1.控制台使用命令进行安装 2.在package.json中配置echarts 3.在main.js中引用二.vue中使用echarts 1.首先设置一个放置图 ...
[vue] 有在vue中使用过echarts吗？踩过哪些坑？如何解决的？
[vue] 有在vue中使用过echarts吗?踩过哪些坑?如何解决的? vue 没用过echarts react到是用过不过我想应该差不多 ,多注意dom的渲染时机和chart的实例化时机在相 ...
VUE中使用Echarts绘制地图迁移
踩坑说明很久以前写jsp时使用过echarts的china.js插件,不过echarts是2.0的,目前vue项目中使用echarts3.8.5,直接将china.js插件引入,代码复制,运行一看, ...
vue和react相同点_我在React和Vue中创建了相同的应用程序。这是区别。
vue和react相同点 by Sunil Sandhu 由Sunil Sandhu 我在React和Vue中创建了相同的应用程序. 这是区别. (I created the same app in ...
React 项目中使用Echarts
直接上代码吧: react 项目中添加Echarts 相关模块 npm install echarts --save 代码: import React from 'react' import * as ...
在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...