静态网站建设开发,企业网站的推广阶段和特点,seo公司培训,手表排名哪个网站好今天介绍一个好用的插件echars#xff0c;一个可视化插件Apache ECharts 一、使用步骤
1、安装
npm install echarts --save
2、导入
import * as echarts from echarts
3、正式使用
echars的使用非常的简单#xff0c;直接点击官网有现成的代码的可用 代码示例
t…今天介绍一个好用的插件echars一个可视化插件Apache ECharts 一、使用步骤
1、安装
npm install echarts --save
2、导入
import * as echarts from echarts
3、正式使用
echars的使用非常的简单直接点击官网有现成的代码的可用 代码示例
templatediv refchart1Ref :style{ width: 430px, height: 600px }/div
/templatescript setup langts
import * as echarts from echarts
import { reactive, ref, onMounted } from vueonMounted(() {init()
})
const chart1Ref ref()const init () {useEcharApi().then(res {var myChart echarts.init(chart1Ref.value)var option {legend: {top: bottom},
//用于提供一些常用的功能按钮方便用户进行交互和操作toolbox: {show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },restore: { show: true },saveAsImage: { show: true }}},
//用于定义图表的数据系列series: [{name: xxx,type: pie,radius: [25, 125],data: [{ value: res.data[1], name: xxx },{ value: res.data[2], name: xxxx },{ value: res.data[3], name: xxxx }],center: [50%, 50%],roseType: area,itemStyle: {borderRadius: 8}}]}
//使图表根据新的 option 配置进行重新渲染从而呈现出最新的图表效果option myChart.setOption(option)})
}/script
上述代码后端穿入的为一个map集合的三条记录最终的数据依据自己想要展示的不同进行改变。
