准备工作

初始模板

注意：
1.在 HTML 中一定要有图表id、长、宽。

<template><div><div id="picName" style="width: 500px; height: 400px;"></div></div>
</template>
<script>
import * as echarts from 'echarts';
export default {data() {return {}},methods: {},mounted() { var chartDom = document.getElementById('picName');var myChart = echarts.init(chartDom);var option;option = {}}
}
</script><style>
</style>

一二维图

1.1 option 参数

参数设置

1.2 更新数据

this.request.get("/echarts/getThresholdData").then(res => {option.dataset[0].source =[]option.dataset[0].source.push(['id', 'threshold', 'acc_score', 'f1_score'],)var a = res.data.lengthfor (var i=0 ; i < a; i++) {option.dataset[0].source.push([res.data[i].id,res.data[i].threshold,res.data[i].accList,res.data[i].f1List])}myChart.setOption(option)})

二三维图

三完整示例

<template><div><div id="line" style="width: 500px; height: 400px;"></div></div>
</template><script>
import * as echarts from 'echarts';
import request from "../../utils/request"export default {data() {return {tableData: [],}},methods: {},mounted() { //页面元素渲染后再触发console.log(1111)var chartDom = document.getElementById('line');var myChart = echarts.init(chartDom);var option;option = {title: {text: '算法评价 score'},xAxis: {type: 'value',name: 'threshold',boundaryGap: false,},yAxis: {type: 'value',name: 'score',scale: true,},dataset: [{id: 'dataset_raw',source: [['id', 'threshold', 'acc_score', 'f1_score'],[1, 0, 85.8, 93.7],[2, 5, 73.4, 55.1],[3, 10, 65.2, 82.5],[4, 15, 53.9, 39.1]]},{id: 'acc_score',fromDatasetId: 'dataset_raw',},{id: 'f1_score',fromDatasetId: 'dataset_raw',}],legend: {data: ['acc_score', 'f1_score']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},series: [{name: 'acc_score',type: 'line',datasetId: 'dataset_raw',encode: {x: 'threshold',y: 'acc_score',},smooth: true},{name: 'f1_score',type: 'line',datasetId: 'dataset_raw',encode: {x: 'threshold',y: 'f1_score',},smooth: true,symbolSize: 0, //设定实心点的大小normal: {color: '#6cb041',lineStyle:{width:1//设置线条粗细}}},]};myChart.setOption(option);this.request.get("/echarts/getThresholdData").then(res => {option.dataset[0].source =[]option.dataset[0].source.push(['id', 'threshold', 'acc_score', 'f1_score'],)var a = res.data.lengthfor (var i=0 ; i < a; i++) {option.dataset[0].source.push([res.data[i].id,res.data[i].threshold,res.data[i].accList,res.data[i].f1List])}myChart.setOption(option)})}
}
</script><style></style>

【VUE】【Echarts】绘制图表组件相关推荐

vue echarts绘制市级地图下钻（带注释）
vue echarts绘制市级地图下钻 ------- 以浙江嘉兴市为例首先要知道地图的数据获取:http://datav.aliyun.com/portal/school/atlas/area_s ...
Chart.js与ECharts.js图表组件对比与使用
Chart.js与ECharts.js图表组件对比与使用常用的图表组件 Chart.js与ECharts.js的简要介绍与使用. Chart.js Chart.js官方网址.里面包括文档.例子和G ...
前端开发之vue可视化数据图表组件（Chart.js）
前端开发之vue可视化数据图表组件(Chart.js) 前言制作好的效果图 vue2中使用Chart.js 1.在项目中安装Chart.js 组件 2.vue文件 vue3中使用Chart.js v ...
在vue中使用图表组件工具echarts（一）
本文介绍一款非常好用的图表绘画工具---echarts npm 安装 ECharts 你可以使用如下命令通过 npm 安装 ECharts npm install echarts 安装完成后,就可以在 ...
Vue Echarts绘制世界地图
1.绘制世界地图如下: 2,开始绘制地图 //安装Echarts npm install echarts --save 3.在Main.js中引入word.js世界地图 import '../node ...
React中使用echarts绘制图表
我们都知道,Echarts图表功能非常强大,使用起来也很方便,我们的项目中就用到了Echarts,现在笔者就带大家看看怎么在react中使用Echarts. 我们要想在react项目中高效使用echa ...
vue+Echarts绘制K线图详解（一）----基本日K图绘制
目录 1 引入Echarts 1.1 安装 1.2 引入 1.3 基本使用 2 基础K线图 2.1 基础k线图 2.2 基础日k图 3 总结 1 引入Echarts 1.1 安装使用如下命令通过 n ...
VUE echarts绘制省级/市级地图自动轮循tooltip
效果图绘制省级地图 1.安装echarts依赖,并在main.js中准备 import echarts from "echarts" Vue.prototype.$echarts ...
【vue + echarts】图表自适应缩放(跟随浏览器的窗口缩放,项目侧边栏折叠后的窗口缩放),图表重绘
效果图: 先清楚两个东西,浏览器窗口的缩放和项目侧边栏折叠后窗口的缩放,这两个是不一样的第一种,浏览器窗口缩放后,当前窗口会放大了或者缩小了,这时会走浏览器缩放的代码部分,前几期有出过文章说明,参考 ...

【VUE】【Echarts】绘制图表组件

目录

准备工作

初始模板

一二维图

1.1 option 参数

1.2 更新数据

二三维图

三完整示例

【VUE】【Echarts】绘制图表组件相关推荐

最新文章

热门文章

【VUE】【Echarts】绘制图表组件

目录

准备工作

初始模板

一 二维图

1.1 option 参数

1.2 更新数据

二 三维图

三 完整示例

【VUE】【Echarts】绘制图表组件相关推荐

最新文章

热门文章

一二维图

二三维图

三完整示例