标签：int from chart bottom 返回 astyle 名称 const 模块
1.在组件中创建该模块
<template> <div id = "testChart"></div> </template>
2.导入echarts
前提是：已经在项目中配置过echarts
在<script></script>中导入echarts
<script> import {echartInit} from "../../../utils/echartUtils" </script>
3.初始化该模块
export default { name: ‘Test‘, //vue该组件名称Test.vue mounted() { this.testChart = echartInit(‘testChart‘); //初始化该echarts表 /*this.testChart.setOption(this.option); */ // 如果是写死的数据，可以在这儿setOption()看效果 }, }
4.将data中的option数据返回
在返回的数据（请求的数据）成功后加入setOption();
如果是写死的数据，可以在mounted中直接加入setOption()看结果；
如下为动态数据获取
export default{ data() { return { option: { "grid": { "height": "67%", "right": "10%", "top": "8%", "width": "83%" }, "legend": { "data": [‘新增‘,‘完成‘,‘未完成‘], bottom: ‘5%‘ }, "series": [ { name: ‘新增‘, type: ‘line‘, /*areaStyle: {},*/ smooth: false, data: [] }, { name: ‘完成‘, type: ‘line‘, /*areaStyle: {},*/ //折线下显示填充色 smooth: false, data: [] //可以写固定的数据 }, { name: ‘未完成‘, type: ‘line‘, smooth: false, // 折线，false不平滑的折线,true平滑的曲线 data: [] //可以写固定的数据 }, ], "toolbox": { "emphasis": { "iconStyle": { "textAlign": "right", "textPosition": "left" } }, "orient": "vertical", "right": "2%", "show": true, "textStyle": { "align": "left" } }, "tooltip": { "axisPointer": { "type": "shadow" }, "trigger": "axis" }, "xAxis": { "axisLine": { "lineStyle": { "color": "rgb(0, 138, 205)" } }, "boundaryGap": true, "data": [], //可以写固定的数据 "splitLine": { "show": false }, "splitNumber": 1, "type": "category" }, "yAxis": { "min": 0, "splitNumber": 8, "type": "value" } }, testChart: {} } }, }
5.通过getData()向后台获取数据并返回，将获取的数据返回setOption()
this.testChart.setOption(this.option);
标签：int from chart bottom 返回 astyle 名称 const 模块
原文地址：https://www.cnblogs.com/lynn20/p/11673805.html
