西北乱跑娃 -- VUE3引入echarts

已于 2022-03-28 14:46:53 修改
阅读量921 收藏
点赞数
分类专栏： 前端 文章标签： python linux centos
于 2022-03-28 14:45:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/human_soul/article/details/123795180
版权 
npm install echarts
npm install echarts-wordcloud

<template>
    <div id="myChart" :style="{width: '100%', height: '550px'}"></div>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts'
import {onMounted} from "vue";

export default {
  setup() {
    onMounted(() => { // 需要获取到element,所以是onMounted的Hook
      let myChart = echarts.init(document.getElementById("myChart"));
      // 绘制图表

      const option = {
          tooltip: {
            trigger:'axis'
          },
          legend: {
            data: [{
              name:'1',
              icon:'rect',
              color: {
                  type: 'linear',
                  x: 0,
                  x2: 1,
                  y: 0,
                  y2: 0,
                  colorStops: [
                    { offset: 0, color: 'rgba(5, 75, 170, 1)' },
                    { offset: 1, color: 'rgba(11, 151, 232, 1)' }
                  ]
                } //盖子的颜色
            }, {
              name:'2',
              icon:'rect',
              color: {
                  type: 'linear',
                  x: 0,
                  x2: 1,
                  y: 0,
                  y2: 0,
                  colorStops: [
                    { offset: 0, color: 'rgba(90, 45, 192, 1)' },
                    { offset: 1, color: 'rgba(184, 91, 225, 1)' }
                  ]
                } //盖子的颜色
            }, {
              name:'3',
              icon:'rect',
              color: {
                  type: 'linear',
                  x: 0,
                  x2: 0,
                  y: 1,
                  y2: 0,
                  colorStops: [
                    { offset: 0, color: 'rgba(3, 120, 134, 1)' },
                    { offset: 1, color: 'rgba(0, 200, 188, 1)' }
                  ]
                } //盖子的颜色
            },'4'],
            itemWidth: 8,
            itemHeight: 8,
            textStyle: {
              fontWeight: 'normal',
              color: '#A2A5AA'
            }
          },
          xAxis: {
            type: 'category',
            // boundaryGap: false, // 不留白，从原点开始
            axisLine: {
              //设置坐标轴线
              lineStyle: {
                color: '#6C6F79' //改轴颜色
              }
            },
            axisTick: { show: false }, //设置刻度线颜色
            axisLabel: {
              //坐标轴刻度标签的相关设置。
              interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
              //	margin:15,
              textStyle: {
                color: '#A2A5AA',

                fontSize: 10
              }
            },
            data: ['1日', '2日', '3日', '4日', '5日', '6日']
          },
          yAxis: [
            {
              type: 'value',
              name: '金额(万元)',
              min: 0,
              max: 1000,
              interval: 200,
              nameTextStyle: {
                color: '#A2A5AA',
                fontSize: 10
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: '#6C6F79' //改轴颜色
                }
              },
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: '#A2A5AA', //改轴数值颜色
                  fontSize: 10
                }
              }
            },
            {
              type: 'value',
              name: '环比(%)',
              min: 0,
              max: 100,
              interval: 20,
              nameTextStyle: {
                color: '#A2A5AA',
                fontSize: 10
              },
              splitLine: {
                lineStyle: {
                  color: 'rgba(255,255,255,0.1)' //改轴颜色
                }
              },
              axisTick: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: '#6C6F79' //改轴颜色
                }
              },
              axisLabel: {
                formatter: '{value}%',
                textStyle: {
                  color: '#A2A5AA', //改轴数值颜色
                  fontSize: 10
                }
              }
            }
          ],
          series: [
            {
              z: 2,
              name: '1',
              type: 'pictorialBar',
              symbolPosition: 'end',
              data: [410, 420, 520, 520, 610, 450],
              symbol: 'diamond',
              symbolOffset: ['-150%', '-65%'], //盖子的位置
              symbolSize: [8, 6], //盖子的大小
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  x2: 1,
                  y: 0,
                  y2: 0,
                  colorStops: [
                    { offset: 0, color: 'rgba(94, 232, 252, 1)' },
                    { offset: 1, color: 'rgba(30, 169, 237, 1)' }
                  ]
                } //盖子的颜色
              },
              tooltip: {
                show: false
              }
            },
            {
              z: 1,
              type: 'bar',
              name: '1',
              barWidth: 8,
              barGap: '50%',
              data: [410, 420, 520, 520, 610, 450],
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  x2: 1,
                  y: 0,
                  y2: 0,
                  colorStops: [
                    { offset: 0, color: 'rgba(5, 75, 170, 1)' },
                    { offset: 0.5, color: 'rgba(11, 151, 232, 1)' },
                    { offset: 0.5, color: 'rgba(10, 57, 123, 1)' },
                    { offset: 1, color: 'rgba(117, 77, 253, 1)' }
                  ]
                }
              }
            },
            {
              z: 2,
              name: '2',
              type: 'pictorialBar',
              symbolPosition: 'end',
              data: [310, 320, 420, 420, 510, 350],
              symbol: 'diamond',
              symbolOffset: ['0%', '-65%'],
              symbolSize: [8, 6],
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  x2: 1,
                  y: 0,
                  y2: 0,
                  colorStops: [
                    { offset: 0, color: 'rgba(220, 149, 251, 1)' },
                    { offset: 1, color: 'rgba(119, 62, 247, 1)' }
                  ]
                }
              },
              tooltip: {
                show: false
              }
            },
            {
              z: 1,
              type: 'bar',
              name: '2',
              barWidth: 8,
              // barGap: '-50%',
              data: [310, 320, 420, 420, 510, 350],
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  x2: 1,
                  y: 0,
                  y2: 0,
                  colorStops: [
                    { offset: 0, color: 'rgba(90, 45, 192, 1)' },
                    { offset: 0.5, color: 'rgba(184, 91, 225, 1)' },
                    { offset: 0.5, color: 'rgba(50, 13, 133, 1)' },
                    { offset: 1, color: 'rgba(90, 45, 192, 1)' }
                  ]
                }
              }
            },
            {
              z: 2,
              name: '3',
              type: 'pictorialBar',
              symbolPosition: 'end',
              data: [310, 320, 420, 420, 510, 350],
              symbol: 'diamond',
              symbolOffset: ['150%', '-65%'],
              symbolSize: [8, 6],
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  x2: 1,
                  y: 0,
                  y2: 0,
                  colorStops: [
                    { offset: 0, color: 'rgba(34, 255, 242, 1)' },
                    { offset: 1, color: 'rgba(30, 169, 237, 1)' }
                  ]
                }
              },
              tooltip: {
                show: false
              }
            },
            {
              z: 1,
              type: 'bar',
              name: '3',
              barWidth: 8,
              // barGap: '-50%',
              data: [310, 320, 420, 420, 510, 350],
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 1,
                  x2: 0,
                  y: 0,
                  y2: 0,
                  colorStops: [
                    { offset: 0, color: 'rgba(3, 120, 134, 1)' },
                    { offset: 0.5, color: 'rgba(0, 200, 188, 1)' },
                    { offset: 0.5, color: 'rgba(0, 66, 73, 1)' },
                    { offset: 1, color: 'rgba(0, 127, 119, 1)' }
                  ]
                }
              }
            },
            {
              name: '4',
              type: 'line',
              symbol: 'circle',
              symbolSize: 10, //设定实心点的大小
              yAxisIndex: 1,
              lineStyle:{
                color:'rgba(180, 34, 80, 1)'
              },
              itemStyle:{
                borderWidth:2,
                borderColor: '#fff' ,
                 color: {
                  type: 'linear',
                  x: 0,
                  x2: 1,
                  y: 0,
                  y2: 0,
                  colorStops: [
                    { offset: 0, color: 'rgba(176, 29, 81, 1)' },
                    { offset: 1, color: 'rgba(249, 117, 60, 1)' }
                  ]
                }
              },
              data: [70, 65, 83, 79, 67, 73]
            }
          ]
        };

      myChart.setOption(option);
      window.onresize = function () { // 自适应大小
        myChart.resize();
      };
    });
  }
}
</script>

<style scoped>

</style>
西北乱跑娃
关注
专栏目录
在vue3 中使用echarts
web18224617243的博客
03-06 5160
在SetUp中使用echarts 在setup中可以直接引入文件 import { onMounted } from "vue"; import * as echarts from 'echarts' export default { name: "data_page", setup() { onMounted(() => {//需要获取到element,所以是onMounted的Hook let myChart = echarts.init(document.getEle
Big-Screen-Vue-Datav-Echarts:政务大屏-前端(VUE+DataV+Echarts)
05-11
项目环境：vue-cli-3.0、webpack-4.0、npm-6.13、node-v12.16。 请拉取 master 分支的代码，其余是开发分支。 友情链接： ， 项目展示 二、主要文件介绍 文件 作用/功能 main.js 主目录文件，引入Echart/DataV等文件...
echarts
weixin_34283445的博客
09-24 426
&lt;div id="main" style="width: 600px;height:400px;"&gt;&lt;/div&gt; &lt;script src="~/lib/echarts/dist/echarts.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt;
Vue3使用ECharts
LMD3349的博客
08-14 787
title: {text: '简单柱状图示例' // 图表的标题},tooltip: {}, // 启用图表的工具提示功能legend: {data: ['销售量'] // 图例显示的项名称},xAxis: {data: ['产品 A', '产品 B', '产品 C', '产品 D', '产品 E'] // X 轴的类目数据},yAxis: {}, // Y 轴的配置项，使用默认配置series: [name: '销售量', // 数据系列的名称。
vue3 + echarts-wordcloud（详细配置） 绘制词云图
qq_40912618的博客
12-29 5508
词云图，是一种文本数据的视觉展示，由词汇组成类似云的彩色图形。echarts-wordcloud是基于echarts的一个词云库，本篇主要介绍它的使用方法。
Vue3 使用 Echarts
备忘璐的博客
04-21 1879
第一种方法 // 下载echarts npm i echarts -S <template> <div id="main" style="width: 600px; height: 400px"></div> </template> <script> import { onMounted } from 'vue' import * as echarts from 'echarts' // 使用echarts export default {
Vue3 使用 echarts
preoccupied_的博客
09-04 1193
echarts 是百度基于 JavaScript 实现的一个开源可视化图表库，主要特点就是可视化类型丰富、动画炫酷、使用简单。这个教程就简单演示如何在 Vue 3 项目中使用 echarts。
在vue中使用vue-echarts-v3的实例代码
10-18
在Vue.js应用中集成ECharts图表库，通常我们会选择使用vue-echarts-v3这个封装库，它使得在Vue环境中使用ECharts变得更加便捷。本文将详细介绍如何在Vue项目中使用vue-echarts-v3，包括安装、配置、以及具体实例。 ...
vue-echarts-v3：ECharts.js（v3.x +）的Vue.js（v2.x +）组件包装
02-03
vue-echarts-v3 于 v3.x+ v2.x+组件包装 特征 轻量，高效，按需绑定事件； 支持按需导入ECharts.js图表​​和组件； 支持组件调整大小事件自动更新视图； 安装 $ npm install --save echarts vue-echarts-v3 用法...
echarts-for-vue::bar_chart::chart_increasing:Vue 3、2和TypeScript的ECharts包装器组件
05-11
:bar_chart: :chart_increasing: Vue 3、2和TypeScript的ECharts包装器组件 特征 支持Vue 3和2； 支持自动调整大小； 符合Vue和ECharts用户的习惯； 提供纯函数API，无副作用； 轻巧的封装，易于使用； 安装 ...
在Vue3中使用 ECharts
weixin_63298649的博客
06-12 404
在这个例子中，我们创建了一个简单的柱状图。我们使用 Vue 3 的 `ref` 来引用图表的 DOM 元素，并在`onMounted`生命周期中初始化 ECharts 图表。1. 安装 ECharts：首先，您需要安装 ECharts 库。2. 创建一个 Vue 组件来显示 ECharts 图表。试了好久ref一直报错，最后还是靠AI解决的，亲测有效。text: '示例图表'
echarts组件（vue3封装）
01-12
vue3封住echarts组件，包含自适应屏幕，代码可复用
Vue3使用Echarts图表
前端、python爱好者
11-09 7536
Vue3使用Echarts图表 前言： Vue3使用Echarts图表基本可以按照Echarts官网的描述来使用，这里是按照自己的方式做了一些简化和常规性的叙述，主要分为以下几步来完成： 第一步： 安装 npm install echarts --save 第二步： 使用 这里目前使用的是全局引用，没有去做按需导入，另外，引用的时候只需要在需要图表的组件中引用即可。下面是示例的代码，里面加了注释说明。 <template> <h1>Echarts图表</h1> &
Vue3封装使用Echarts
weixin_68714627的博客
06-26 987
echarts官网。
在Vue3使用Echarts步骤
while1170的博客
03-02 904
7.在TS中创建一个onMounted初始化函数，一进入页面就会调用此函数;并在此调用定义的放图表的函数。也可在页面中单独引入使用：`import * as echarts from ‘echarts’
在Vue 3项目中使用 echarts
热门推荐
dangfulin的博客
05-01 3万+
记得第一次使用 echarts 还是2019年的时候，那时做的一个物联网项目云平台的前端需要一些数据可视化功能，经过一些对比后就使用了 echarts 。上手非常快，专业性也足够，因此在后来其他的一些项目中就多次用到它。 echarts 是百度基于 JavaScript 实现的一个开源可视化图表库，主要特点就是可视化类型丰富、动画炫酷、使用简单。 这个教程就简单演示如何在 Vue 3 项目中使用 echarts。 一，创建 Vue3 项目并安装 echarts npm 创建项目： npm create u
Vue中按需引入ECharts(一看就会)
智者劳心
04-17 1万+
vue按需引入ECharts 炒鸡详细
vue3按需引入vue-echarts
最新发布
09-19
Vue3中按需引入`vue-echarts`是为了减少打包体积，只加载实际使用的图表组件。首先，你需要安装`@vueuse/prop-types`库来帮助处理自定义配置： ```bash npm install @vueuse/prop-types ``` 然后，在你的项目里，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

西北乱跑娃

万水千山总是情，犒赏一下行不行

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值