Echarts的使用方法
1.安装Echartsnpm install echarts2.引入echarts文件import * as echarts from "echarts"3.在组件中发送请求,请求echarts相关数据,并做处理,得到图标所需的数据4.定义一个容器5.设置echarts配置option(可参考官网配置,做响应修改)Examples - Apache ECharts6.初始化图标将配好的配置放到上面
·
1.安装Echarts
npm install echarts
2.引入echarts文件
import * as echarts from "echarts"
3.在组件中发送请求,请求echarts相关数据,并做处理,得到图标所需的数据
4.定义一个容器
5.设置echarts配置option(可参考官网配置,做响应修改)
6.初始化图表
将配好的配置放到上面定义的容器中
const E= echarts.init(容器Dom /this.$refs.useEcharts)
7.绘制图标
E.setOption(配置名 option)
mounted () {
getData().then(res=>{
console.log(res)
const {code,data}=res.data;
if(code===20000){
this.tableData=data.tableData
// 折线图数据
const order=data.orderData
const xData=order.date
const keyArray= Object.keys(order.data[0])
const seriseData=[]
keyArray.forEach(key=>{
seriseData.push({
name:key,
data:order.data.map(item=>item[key]),
type:"line"
})
})
// 折线图配置
const option={
xAxis:{
data:xData
},
yAxis:{},
series:seriseData
}
// 初始化 放到容器中
const Z= echarts.init(this.$refs.echarts)
// 绘图
Z.setOption(option)
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)