当前位置: 代码迷 >> 综合 >> vue 引入static静态文件 echart.js
  详细解决方案

vue 引入static静态文件 echart.js

热度:18   发布时间:2024-02-11 20:17:36.0

总结: vue中使用echart,引入js.
var echarts = require(’…/…/…/…/static/js/echarts-4.2.0.js’)
methods中封装好方法。
钩子函数中调用。

<script>
var echarts = require('../../../../static/js/echarts-4.2.0.js')methods: {// 公路统计echarts图表setBarEcharts: function () {// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('barEcharts'));// 指定图表的配置项和数据var option = {tooltip: {},legend: {right: 20,data: ['未抢通', '已抢通', '未审核']},xAxis: {data: ["杭州市", "杭州市", "杭州市", "杭州市", "杭州市", "杭州市", "杭州市", "杭州市"],axisLine: {show: false},axisTick: {show: false}},yAxis: {axisLine: {show: false},axisTick: {show: false},splitLine: {lineStyle: {color: "#f6f6f6"}}},series: [{name: '未抢通',stack: 'bar1',type: 'bar',barWidth: '40%',data: [5, 20, 36, 10, 10, 20, 20, 20]},{name: '已抢通',stack: 'bar1',type: 'bar',barWidth: '40%',data: [5, 20, 36, 10, 10, 20, 20, 20]},{name: '未审核',stack: 'bar1',type: 'bar',barWidth: '40%',itemStyle: {barBorderRadius: [4, 4, 0, 0]},data: [5, 20, 36, 10, 10, 20, 20, 20]}],color: ['#9788ef', '#25c8b3', '#3599f3']};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);},
  相关解决方案