vue 使用 echarts
前端小杰 人气:01. 插入echarts 所需模块
import echarts from "echarts"; import 'echarts/map/js/china' // 使用中国地图需把China.js文件引入
2. 正式代码部分
//初始化echarts实例 通过传参获取要放置的id名称 var myChart = echarts.init(document.getElementById("容器的id名称")); // 指定图表的配置项和数据 var optionMap = { //设置 背景颜色 backgroundColor: "#FFFFFF", tooltip: { trigger: "item", }, //左侧小导航图标 visualMap: { // 水平摆放 orient:"horizontal", // 是否显示指示条 show: true, // 设置字体 textStyle: { fontSize: 3.5, }, // 显示的位置 x: "", splitList: [ { start: 0, end: 0 }, { start: 1, end: 9 }, { start: 10, end: 99 }, { start: 100, end: 499 }, { start: 500, end: 999 }, { start: 1000, end: 10000 }, { start: 10000 }, ], color: [ "#4a1213", "#772526", "#bb3937", "#d56355", "#e9a188", "#faebd2", "#f5f5f5", ], }, //配置属性 series: [ { name: title, type: "map", // 类型 为map地图 // 具体地图类型为china 在这里需要引入echarts中自带的China.js文件 mapType: "china", roam: false, // 设置是否可以缩放 false 为不可以缩放 zoom:1.2,// 默认缩放比例 刚进入页面时的缩放比例 itemStyle:{ normal: { areaColor: '#000', borderColor: 'skyblue', borderWidth: 1, shadowColor: '#ccc', shadowBlur: 30, opacity:1 }, }, label: { normal: { show: true, //是否显示省份名称 // 设置显示省份名称的的字体大小 ,也可以显示fontFamily:... ... textStyle: { fontSize: 6, }, }, emphasis: { show: true, }, }, data:[{name:'xxx',value:数字},] }, ], }; //使用制定的配置项和数据显示图表 myChart.setOption(optionMap);
3. 最后的效果
加载全部内容