vue3中套用echarts官网例子

//npm完echarts ，直接复制以下代码

<template><divf id="lineChar"></divf>
</template>
<script>
import { onMounted } from "vue";
import * as echarts from "echarts";
export default {name: "data_page",setup() {onMounted(() => {//需要获取到element,所以是onMounted的Hooklet myChart = echarts.init(document.getElementById("lineChar"));//绘制图标let category = [];let dottedBase = +new Date();let lineData = [];let barData = [];for (let i = 0; i < 20; i++) {let date = new Date((dottedBase += 3600 * 24 * 1000));category.push([date.getFullYear(), date.getMonth() + 1, date.getDate()].join("-"));let b = Math.random() * 200;let d = Math.random() * 200;barData.push(b);lineData.push(d + b);}// optionmyChart.setOption({backgroundColor: "#0f375f",tooltip: {trigger: "axis",axisPointer: {type: "shadow",},},legend: {data: ["line", "bar"],textStyle: {color: "#ccc",},},xAxis: {data: category,axisLine: {lineStyle: {color: "#ccc",},},},yAxis: {splitLine: { show: false },axisLine: {lineStyle: {color: "#ccc",},},},series: [{name: "line",type: "line",smooth: true,showAllSymbol: true,symbol: "emptyCircle",symbolSize: 15,data: lineData,},{name: "bar",type: "bar",barWidth: 10,itemStyle: {borderRadius: 5,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#14c8d4" },{ offset: 1, color: "#43eec6" },]),},data: barData,},{name: "line",type: "bar",barGap: "-100%",barWidth: 10,itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "rgba(20,200,212,0.5)" },{ offset: 0.2, color: "rgba(20,200,212,0.2)" },{ offset: 1, color: "rgba(20,200,212,0)" },]),},z: -12,data: lineData,},{name: "dotted",type: "pictorialBar",symbol: "rect",itemStyle: {color: "#0f375f",},symbolRepeat: true,symbolSize: [12, 4],symbolMargin: 1,z: -10,data: lineData,},],});window.onresize = function () {//自适应大小myChart.resize();};});},components: {},mounted() {},
};
</script>
<style lang="less" scoped>
#lineChar {width: 700px;height: 700px;
}
</style>

vue3中套用echarts官网例子相关推荐

解决ECharts官网打开缓慢的问题
本章我们将解决在Windows系统中打开ECharts官网缓慢的问题. 1.问题描述正常情况下,我们在Windows环境中打开ECharts官网可能会遇到非常缓慢的情况,一直处于加载中,甚至打不开, ...
vue3中，echarts使用（一）——柱状图和折线图的结合使用
vue3中,echarts使用(一)--柱状图和折线图的结合使用官网:https://echarts.apache.org/zh/index.html 官网示例:https://echarts.ap ...
OpenLayers 官网例子的中文详解
当你希望实现某种功能的时候,即使你对 openlayers 几乎一窍不通,照着官网的例子做,也可以很快的实现想要的效果. 问题在于,官网的例子都是英文啊,不能很快定位到想要的效果是在哪个例子里面!!( ...
layer添加元素 openlayer_OpenLayers 官网例子的中文详解
当你希望实现某种功能的时候,即使你对 openlayers 几乎一窍不通,照着官网的例子做,也可以很快的实现想要的效果. 问题在于,官网的例子都是英文啊,不能很快定位到想要的效果是在哪个例子里面!!( ...
ABP框架官网例子实践（2）（ASP.NET core+Multi Page Web Application）
ABP框架官网例子实践(1)(ASP.NET core+Multi Page Web Application) 第三步:开始在Application中进行编写代码 1.为app service定义一个 ...
php echarts官网,Echarts用法详细介绍
这篇文章主要介绍了Echarts基本用法,详解的介绍了Echarts的基本用法和实例,有兴趣的可以了解一下 echarts太完美了: 1,开源软件,无私的为我们提供漂亮的图形界面: 2,使用简单,默默 ...
easyx官网例子初试
目录基础 easyx简介透明贴图和三元光栅操作精确延时程序自由运动的点冰封的EasyX 火焰效果烟花水波迷宫纪念披头士摇滚乐队基础 easyx简介在官网安装包里面有个easyx ...
根据官网例子一步步实现vueSSR(详细)
根据官网例子一步步实现vue ssr 标题对应官网标题文章目录基本用法模版插值源码结构使用 webpack 的源码结构(vue-cli3) 构建配置服务端路由和代码分割图片未加载,引 ...
linux上传oracle压缩包,Linux中从oracle官网下载jdk文件不是标准的gzip格式文件问题...
http://download.oracle.com/otn-pub/java/jdk/8u131-b11/d54c1d3a095b4ff2b6607d096fa80163/jdk-8u131-lin ...
echarts 官网访问慢
echarts官网访问特别慢,有的时候干脆访问不了,尝试在host文件加入ip地址也不可以,后来发现了以下地址,访问真的速度很快,还有很多demo样例 echarts文档地址: ISQQW.COM x ...

vue3中套用echarts官网例子

vue3中套用echarts官网例子相关推荐

最新文章

热门文章