1. npm install echarts --save 默认就是5版本的。
  2. 在我们需要使用echarts的页面引入
    import * as echarts from 'echarts' //这个跟以前是不一样的。
  3. 我们需要在模板中定义一个容器来存放图表
      <div  ref="indexChart"  :style="{ width: '100%', height: '300px' }"></div>
    这里的宽高必须指定
  4. setup中设置图表配置项 外部引入配置项import barChartOptions from './chartOptions.js'
    setup() {
    // 获取标签容器
    let indexChart= ref(null);
    onMounted(async () => {
      // 初始化
      let barChart = echarts.init(indexChart.value);
      // barChartOptions 配置项，推荐放在外部引入。
      barChart.setOption(barChartOptions);
	  window.onresize = function () {
       //自适应大小, 不用的话不会自适应大小。
        barChart.resize();
      };
	});
    return {
      indexChart,
    };
  },
    配置项：
    // chartOptions.js
export const barChartOptions = () => {
  return {
	    xAxis: {
	        type: 'category',
	        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	    },
	    yAxis: {
	        type: 'value'
	    },
	    series: [{
	        data: [120, 200, 150, 80, 70, 110, 130],
	        type: 'bar',
	        showBackground: true,
	        backgroundStyle: {
	            color: 'rgba(180, 180, 180, 0.2)'
	        }
	    }]
	};
}
# javascript # vue.js
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue